mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix button click & change to bem style
This commit is contained in:
niunai
parent
bdc74d2298
commit
30a5feae21
35
README.md
35
README.md
@ -0,0 +1,35 @@
|
||||
## 下载项目
|
||||
```bash
|
||||
git@gitlab.qima-inc.com:fe/oxygen.git
|
||||
cd oxygen
|
||||
```
|
||||
|
||||
## 安装组件依赖库
|
||||
```bash
|
||||
ynpm i
|
||||
```
|
||||
|
||||
## 新建组件（以waterfall为例）
|
||||
新建一个Vue组件，比如 waterfall
|
||||
```bash
|
||||
make init waterfall
|
||||
```
|
||||
就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息
|
||||
|
||||
## 示例预览（以waterfall为例）
|
||||
在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分
|
||||
在 docs/examples 目录里新建 同名的md文件，如 waterfall.md
|
||||
在项目的根目录下执行以下命令，启动server
|
||||
```
|
||||
make dev
|
||||
```
|
||||
浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
:::demo 有时按钮需要是一个a标签
|
||||
:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1-1">
|
||||
|
||||
@ -42,6 +42,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
@ -60,6 +66,7 @@ export default {
|
||||
'is-block': block
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ? <i class="z-icon-loading"></i> : null
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
<transition name="dialog-bounce">
|
||||
<div class="z-dialog-wrapper">
|
||||
<div class="z-dialog" v-show="value">
|
||||
<div class="z-dialog-header" v-if="title">
|
||||
<div class="z-dialog-title" v-text="title"></div>
|
||||
<div class="z-dialog__header" v-if="title">
|
||||
<div class="z-dialog__title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="z-dialog-content" v-if="message">
|
||||
<div class="z-dialog-message" v-html="message"></div>
|
||||
<div class="z-dialog__content" v-if="message">
|
||||
<div class="z-dialog__message" v-html="message"></div>
|
||||
</div>
|
||||
<div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
<div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,6 +63,9 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@import "./mixins/border_retina.pcss";
|
||||
|
||||
@component-namespace z {
|
||||
@component dialog-wrapper {
|
||||
@b dialog-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@component dialog {
|
||||
@b dialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -18,11 +18,11 @@
|
||||
backface-visibility: hidden;
|
||||
transition: .2s;
|
||||
|
||||
@descendent header {
|
||||
@e header {
|
||||
padding: 15px 0 0;
|
||||
}
|
||||
|
||||
@descendent content {
|
||||
@e content {
|
||||
padding: 15px 20px;
|
||||
min-height: 36px;
|
||||
position: relative;
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@descendent title {
|
||||
@e title {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
@ -40,31 +40,31 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent message {
|
||||
@e message {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@descendent footer {
|
||||
@e footer {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-twobtn {
|
||||
.z-dialog-btn {
|
||||
width: 50%;
|
||||
}
|
||||
@when twobtn {
|
||||
.z-dialog__btn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.z-dialog-cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
.z-dialog__cancel {
|
||||
&::after {
|
||||
@mixin border-retina (right);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@descendent btn {
|
||||
@e btn {
|
||||
line-height: 40px;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
@ -74,11 +74,11 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@descendent cancel {
|
||||
@e cancel {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@descendent confirm {
|
||||
@e confirm {
|
||||
color: #00C000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
@component-namespace z {
|
||||
@component popup {
|
||||
@b popup {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
@ -17,7 +17,7 @@
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
|
||||
@modifier top {
|
||||
@m top {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
@ -25,7 +25,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier right {
|
||||
@m right {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
@ -33,7 +33,7 @@
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
|
||||
@modifier bottom {
|
||||
@m bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
@ -41,7 +41,7 @@
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
@modifier left {
|
||||
@m left {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user