mirror of https://github.com/ElemeFE/element
Merge branch 'next' of github.com:eleme/element-ui into next
# Conflicts: # src/index.jspull/2/head
commit
05e7ea8311
|
@ -32,9 +32,6 @@
|
||||||
"input-number": [
|
"input-number": [
|
||||||
"./packages/input-number/index.js"
|
"./packages/input-number/index.js"
|
||||||
],
|
],
|
||||||
"input-group": [
|
|
||||||
"./packages/input-group/index.js"
|
|
||||||
],
|
|
||||||
"radio": [
|
"radio": [
|
||||||
"./packages/radio/index.js"
|
"./packages/radio/index.js"
|
||||||
],
|
],
|
||||||
|
@ -149,6 +146,9 @@
|
||||||
"message": [
|
"message": [
|
||||||
"./packages/message/index.js"
|
"./packages/message/index.js"
|
||||||
],
|
],
|
||||||
|
"badge": [
|
||||||
|
"./packages/badge/index.js"
|
||||||
|
],
|
||||||
"card": [
|
"card": [
|
||||||
"./packages/card/index.js"
|
"./packages/card/index.js"
|
||||||
],
|
],
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -299,10 +300,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="pure-u-5-6 app__content">
|
<div class="pure-u-5-6 app__content">
|
||||||
<header class="app__header">
|
<header class="app__header">
|
||||||
<h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
|
<h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
|
||||||
</header>
|
</header>
|
||||||
<section class="app__main" ref="main">
|
<section class="app__main" ref="main">
|
||||||
<p class="app__description">{{ $route.description }}</p>
|
<p class="app__description">{{ $route.meta.description }}</p>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</section>
|
</section>
|
||||||
<toc main=".app__main"></toc>
|
<toc main=".app__main"></toc>
|
||||||
|
|
|
@ -0,0 +1,139 @@
|
||||||
|
## 基础用法
|
||||||
|
展示新消息数量
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-badge :value="12" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="3" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
|
||||||
|
<el-dropdown-item class="clearfix">
|
||||||
|
评论
|
||||||
|
<el-badge class="mark" :value="12" />
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item class="clearfix">
|
||||||
|
回复
|
||||||
|
<el-badge class="mark" :value="3" />
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<el-badge :value="12" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="3" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
|
||||||
|
<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
|
||||||
|
<el-dropdown-item class="clearfix">
|
||||||
|
评论
|
||||||
|
<el-badge class="mark" :value="12" />
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item class="clearfix">
|
||||||
|
回复
|
||||||
|
<el-badge class="mark" :value="3" />
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 最大值
|
||||||
|
可自定义最大值
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-badge :value="200" :max="99" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="100" :max="10" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<el-badge :value="200" :max="99" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="100" :max="10" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 自定义内容
|
||||||
|
可以显示数字外的文本内容
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-badge value="new" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge value="hot" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<el-badge value="new" class="item">
|
||||||
|
<el-button size="small">评论</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge value="hot" class="item">
|
||||||
|
<el-button size="small">回复</el-button>
|
||||||
|
</el-badge>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 小红点
|
||||||
|
以红点的形式标注需要关注的内容
|
||||||
|
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-badge is-dot class="item">数据查询</el-badge>
|
||||||
|
<el-badge is-dot class="item">
|
||||||
|
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||||
|
</el-badge>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<el-badge is-dot class="item">数据查询</el-badge>
|
||||||
|
<el-badge is-dot class="item">
|
||||||
|
<el-button class="share-button" icon="share" type="primary"></el-button>
|
||||||
|
</el-badge>
|
||||||
|
```
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.share-button {
|
||||||
|
width: 36px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark {
|
||||||
|
margin-top: 8px;
|
||||||
|
line-height: 1;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
@utils-clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
## API
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||||
|
| value | 显示值 | string, number | | |
|
||||||
|
| max | 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 | number | | |
|
||||||
|
| is-dot | 小圆点 | boolean | | false |
|
|
@ -9,7 +9,8 @@
|
||||||
input4: '',
|
input4: '',
|
||||||
input5: '',
|
input5: '',
|
||||||
input6: '',
|
input6: '',
|
||||||
textarea: ''
|
textarea: '',
|
||||||
|
select: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -28,6 +29,9 @@
|
||||||
.el-textarea {
|
.el-textarea {
|
||||||
width: 414px;
|
width: 414px;
|
||||||
}
|
}
|
||||||
|
.el-input-group {
|
||||||
|
min-width: 260px;
|
||||||
|
}
|
||||||
.el-input-group + .el-input-group {
|
.el-input-group + .el-input-group {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
@ -82,22 +86,6 @@
|
||||||
</el-input>
|
</el-input>
|
||||||
```
|
```
|
||||||
|
|
||||||
<!-- ## readonly 状态
|
|
||||||
|
|
||||||
<el-input
|
|
||||||
:readonly="true"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
:value.sync="input1">
|
|
||||||
</el-input>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<el-input
|
|
||||||
:readonly="true"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
:value.sync="input1">
|
|
||||||
</el-input>
|
|
||||||
``` -->
|
|
||||||
|
|
||||||
## Input 图标
|
## Input 图标
|
||||||
|
|
||||||
<div class="demo-box demo-input">
|
<div class="demo-box demo-input">
|
||||||
|
@ -118,76 +106,54 @@
|
||||||
|
|
||||||
## Input Group
|
## Input Group
|
||||||
|
|
||||||
前置和后置元素可以是任何东西, 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
|
|
||||||
|
|
||||||
### 后置元素
|
### 后置元素
|
||||||
|
|
||||||
<div class="demo-box demo-input">
|
<div class="demo-box demo-input">
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2">
|
||||||
<el-input
|
<template slot="append">.com</template>
|
||||||
placeholder="请输入内容"
|
|
||||||
:value.sync="input2">
|
|
||||||
</el-input>
|
</el-input>
|
||||||
<span class="el-input-group__label" slot="append">.com</span>
|
|
||||||
</el-input-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2">
|
||||||
<el-input
|
<template slot="append">.com</template>
|
||||||
placeholder="请输入内容"
|
</el-input>
|
||||||
:value.sync="input2">
|
|
||||||
</el-input>
|
|
||||||
<span class="el-input-group__label" slot="append">.com</span>
|
|
||||||
</el-input-group>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 前置元素
|
### 前置元素
|
||||||
<div class="demo-box demo-input">
|
<div class="demo-box demo-input">
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2">
|
||||||
<el-button slot="prepend" type="text">按钮</el-button>
|
<template slot="prepend">Http://</template>
|
||||||
<el-input
|
|
||||||
placeholder="请输入内容"
|
|
||||||
:value.sync="input2">
|
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-input-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2">
|
||||||
<el-button slot="prepend" type="text">按钮</el-button>
|
<template slot="prepend">Http://</template>
|
||||||
<el-input
|
</el-input>
|
||||||
placeholder="请输入内容"
|
|
||||||
:value.sync="input2">
|
|
||||||
</el-input>
|
|
||||||
</el-input-group>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 前置和后置元素
|
### 前置和后置元素
|
||||||
<div class="demo-box demo-input">
|
<div class="demo-box demo-input">
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
|
||||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
|
<el-select v-model="select" slot="prepend" :width="100">
|
||||||
<li>选项一</li>
|
<el-option label="餐厅名" value="1"></el-option>
|
||||||
<li>选项二</li>
|
<el-option label="订单号" value="2"></el-option>
|
||||||
<li>选项三</li>
|
<el-option label="用户电话" value="3"></el-option>
|
||||||
<li class="divider">选项四</li>
|
</el-select>
|
||||||
</el-dropdown>
|
<el-button slot="append" icon="search"></el-button>
|
||||||
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
|
</el-input>
|
||||||
<el-button type="text" slot="append">搜索</el-button>
|
|
||||||
</el-input-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<el-input-group>
|
<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
|
||||||
<el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
|
<el-select v-model="select" slot="prepend" :width="100">
|
||||||
<li>选项一</li>
|
<el-option label="餐厅名" value="1"></el-option>
|
||||||
<li>选项二</li>
|
<el-option label="订单号" value="2"></el-option>
|
||||||
<li>选项三</li>
|
<el-option label="用户电话" value="3"></el-option>
|
||||||
<li class="divider">选项四</li>
|
</el-select>
|
||||||
</el-dropdown>
|
<el-button slot="append" icon="search"></el-button>
|
||||||
<el-input placeholder="请输入内容" :value.sync="input2"></el-input>
|
</el-input>
|
||||||
<el-button type="text" slot="append">搜索</el-button>
|
|
||||||
</el-input-group>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 尺寸
|
## 尺寸
|
||||||
|
|
|
@ -233,6 +233,12 @@
|
||||||
"path": "/tree",
|
"path": "/tree",
|
||||||
"name": "tree (tree)",
|
"name": "tree (tree)",
|
||||||
"title": "tree"
|
"title": "tree"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "/badge",
|
||||||
|
"name": "标记 (badge)",
|
||||||
|
"title": " Badge 标记",
|
||||||
|
"description": "出现在按钮、图标旁的数字或状态标记"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,10 @@ const registerRoute = (config) => {
|
||||||
|
|
||||||
route.push({
|
route.push({
|
||||||
path: page.path,
|
path: page.path,
|
||||||
|
meta: {
|
||||||
title: page.title || page.name,
|
title: page.title || page.name,
|
||||||
description: page.description,
|
description: page.description
|
||||||
|
},
|
||||||
component: component.default || component
|
component: component.default || component
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
var cooking = require('cooking');
|
||||||
|
var path = require('path');
|
||||||
|
|
||||||
|
cooking.set({
|
||||||
|
entry: {
|
||||||
|
index: path.join(__dirname, 'index.js')
|
||||||
|
},
|
||||||
|
dist: path.join(__dirname, 'lib'),
|
||||||
|
template: false,
|
||||||
|
format: 'umd',
|
||||||
|
moduleName: 'ElBadge',
|
||||||
|
extractCSS: 'style.css',
|
||||||
|
|
||||||
|
extends: ['vue', 'saladcss']
|
||||||
|
});
|
||||||
|
|
||||||
|
cooking.add('resolve.alias', {
|
||||||
|
'main': path.join(__dirname, '../../src'),
|
||||||
|
'packages': path.join(__dirname, '../../packages')
|
||||||
|
});
|
||||||
|
|
||||||
|
cooking.add('externals', {
|
||||||
|
vue: {
|
||||||
|
root: 'Vue',
|
||||||
|
commonjs: 'vue',
|
||||||
|
commonjs2: 'vue',
|
||||||
|
amd: 'vue'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = cooking.resolve();
|
|
@ -0,0 +1,7 @@
|
||||||
|
const Badge = require('./src/main');
|
||||||
|
|
||||||
|
Badge.install = function(Vue) {
|
||||||
|
Vue.component(Badge.name, Badge);
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Badge;
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "el-badge",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"description": "A badge component for Vue.js.",
|
||||||
|
"keywords": [
|
||||||
|
"element",
|
||||||
|
"vue",
|
||||||
|
"component"
|
||||||
|
],
|
||||||
|
"main": "./lib/index.js",
|
||||||
|
"repository": "https://github.com/element-component/element/tree/master/packages/badge",
|
||||||
|
"author": "elemefe",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {}
|
||||||
|
}
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div class="el-badge">
|
||||||
|
<slot></slot>
|
||||||
|
<sup
|
||||||
|
v-text="content"
|
||||||
|
class="el-badge__content"
|
||||||
|
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'el-badge',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
value: {},
|
||||||
|
max: Number,
|
||||||
|
isDot: Boolean
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
content() {
|
||||||
|
if (this.isDot) return;
|
||||||
|
|
||||||
|
const value = this.value;
|
||||||
|
const max = this.max;
|
||||||
|
|
||||||
|
if (typeof value === 'number' && typeof max === 'number') {
|
||||||
|
return max < value ? `${max}+` : value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -23,11 +23,9 @@
|
||||||
<!-- 下拉菜单 -->
|
<!-- 下拉菜单 -->
|
||||||
<transition name="md-fade-bottom">
|
<transition name="md-fade-bottom">
|
||||||
<el-dropdown-menu
|
<el-dropdown-menu
|
||||||
ref:menu
|
|
||||||
v-if="visible"
|
v-if="visible"
|
||||||
@mouseenter.native="handleMouseEnter"
|
@mouseenter.native="handleMouseEnter"
|
||||||
@mouseleave.native="handleMouseLeave"
|
@mouseleave.native="handleMouseLeave">
|
||||||
>
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
const ElInputGroup = require('../input/src/input-group');
|
|
||||||
|
|
||||||
ElInputGroup.install = function(Vue) {
|
|
||||||
Vue.component(ElInputGroup.name, ElInputGroup);
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = ElInputGroup;
|
|
|
@ -1,9 +1,7 @@
|
||||||
const ElInput = require('./src/input');
|
const ElInput = require('./src/input');
|
||||||
const ElInputGroup = require('./src/input-group');
|
|
||||||
|
|
||||||
ElInput.install = function(Vue) {
|
ElInput.install = function(Vue) {
|
||||||
Vue.component(ElInput.name, ElInput);
|
Vue.component(ElInput.name, ElInput);
|
||||||
Vue.component(ElInputGroup.name, ElInputGroup);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = ElInput;
|
module.exports = ElInput;
|
||||||
|
|
|
@ -1,20 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="el-input-group">
|
|
||||||
<div class="el-input-group__prepend" v-if="_slotContents.prepend">
|
|
||||||
<slot name="prepend"></slot>
|
|
||||||
</div>
|
|
||||||
<slot></slot>
|
|
||||||
<div class="el-input-group__append" v-if="_slotContents.append">
|
|
||||||
<slot name="append"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ElInputGroup',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
|
@ -2,11 +2,16 @@
|
||||||
<div :class="[
|
<div :class="[
|
||||||
type === 'textarea' ? 'el-textarea' : 'el-input',
|
type === 'textarea' ? 'el-textarea' : 'el-input',
|
||||||
size ? 'el-input-' + size : '',
|
size ? 'el-input-' + size : '',
|
||||||
{'is-disabled': disabled}
|
{
|
||||||
|
'is-disabled': disabled,
|
||||||
|
'el-input-group': $slots.prepend || $slots.append
|
||||||
|
}
|
||||||
]">
|
]">
|
||||||
<template v-if="type !== 'textarea'">
|
<template v-if="type !== 'textarea'">
|
||||||
<i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
|
<!-- 前置元素 -->
|
||||||
<i class="el-input__icon el-icon-loading" v-if="validating"></i>
|
<div class="el-input-group__prepend" v-if="$slots.prepend">
|
||||||
|
<slot name="prepend"></slot>
|
||||||
|
</div>
|
||||||
<input
|
<input
|
||||||
:type="type"
|
:type="type"
|
||||||
:name="name"
|
:name="name"
|
||||||
|
@ -23,6 +28,13 @@
|
||||||
:autocomplete="autoComplete"
|
:autocomplete="autoComplete"
|
||||||
ref="input"
|
ref="input"
|
||||||
>
|
>
|
||||||
|
<!-- input 图标 -->
|
||||||
|
<i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
|
||||||
|
<i class="el-input__icon el-icon-loading" v-if="validating"></i>
|
||||||
|
<!-- 后置元素 -->
|
||||||
|
<div class="el-input-group__append" v-if="$slots.append">
|
||||||
|
<slot name="append"></slot>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
|
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
|
||||||
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>
|
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
@import "./common/var.css";
|
||||||
|
|
||||||
|
@component-namespace el {
|
||||||
|
@b badge {
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
@e content {
|
||||||
|
background-color: var(--badge-fill);
|
||||||
|
border-radius: var(--badge-radius);
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: var(--badge-font-size);
|
||||||
|
height: var(--badge-size);
|
||||||
|
line-height: var(--badge-size);
|
||||||
|
padding: 0 var(--badge-padding);
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
|
||||||
|
@when fixed {
|
||||||
|
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
|
||||||
|
transform: translateY(-50%) translateX(100%);
|
||||||
|
|
||||||
|
@when dot {
|
||||||
|
right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@when dot {
|
||||||
|
size: 8px 8px;
|
||||||
|
padding: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -151,7 +151,7 @@
|
||||||
--input-large-height: 42px;
|
--input-large-height: 42px;
|
||||||
|
|
||||||
--input-small-font-size: 13px;
|
--input-small-font-size: 13px;
|
||||||
--input-small-height: 28px;
|
--input-small-height: 30px;
|
||||||
|
|
||||||
--input-mini-font-size: 12px;
|
--input-mini-font-size: 12px;
|
||||||
--input-mini-height: 22px;
|
--input-mini-height: 22px;
|
||||||
|
@ -354,6 +354,14 @@
|
||||||
--dropdown-menuItem-hover-fill: #e5e9f2;
|
--dropdown-menuItem-hover-fill: #e5e9f2;
|
||||||
--dropdown-menuItem-hover-color: #475669;
|
--dropdown-menuItem-hover-color: #475669;
|
||||||
|
|
||||||
|
/* Badge
|
||||||
|
-------------------------- */
|
||||||
|
--badge-fill: var(--color-danger);
|
||||||
|
--badge-radius: 10px;
|
||||||
|
--badge-font-size: 12px;
|
||||||
|
--badge-padding: 6px;
|
||||||
|
--badge-size: 18px;
|
||||||
|
|
||||||
/*Card
|
/*Card
|
||||||
--------------------------*/
|
--------------------------*/
|
||||||
--card-border-color: var(--disabled-border-base);
|
--card-border-color: var(--disabled-border-base);
|
||||||
|
|
|
@ -32,5 +32,6 @@
|
||||||
@import "./row.css";
|
@import "./row.css";
|
||||||
@import "./col.css";
|
@import "./col.css";
|
||||||
@import "./spinner.css";
|
@import "./spinner.css";
|
||||||
|
@import "./badge.css";
|
||||||
@import "./card.css";
|
@import "./card.css";
|
||||||
@import "./rate.css";
|
@import "./rate.css";
|
||||||
|
|
|
@ -1,29 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
@import "./common/var.css";
|
|
||||||
/*@import "./core/dropdown.css";*/
|
|
||||||
@import "./core/tag.css";
|
|
||||||
@import "./core/input.css";
|
|
||||||
|
|
||||||
@component-namespace element {
|
|
||||||
@b input {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: var(--input-font-size);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@e placeholder {
|
|
||||||
background-color: #fff;
|
|
||||||
color: var(--input-border-color);
|
|
||||||
left: 4px;
|
|
||||||
padding: 0 2px;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--input-height) / 2 - var(--input-font-size) + 4);
|
|
||||||
transition: all 0.2s ease-out;
|
|
||||||
z-index: var(--index-normal);
|
|
||||||
|
|
||||||
@when enter {
|
|
||||||
color: var(--input-border-color-hover);
|
|
||||||
top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -4,6 +4,7 @@
|
||||||
@component-namespace el {
|
@component-namespace el {
|
||||||
@b input {
|
@b input {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-size: var(--font-size-base);
|
||||||
|
|
||||||
@e inner {
|
@e inner {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -11,7 +12,6 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--input-height);
|
height: var(--input-height);
|
||||||
font-size: var(--font-size-base);
|
|
||||||
color: var(--input-color);
|
color: var(--input-color);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
@ -71,77 +71,89 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@b input-large {
|
@b input-large {
|
||||||
& .el-input__inner {
|
|
||||||
font-size: var(--input-large-font-size);
|
font-size: var(--input-large-font-size);
|
||||||
|
|
||||||
|
& .el-input__inner {
|
||||||
height: var(--input-large-height);
|
height: var(--input-large-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@b input-small {
|
@b input-small {
|
||||||
& .el-input__inner {
|
|
||||||
font-size: var(--input-small-font-size);
|
font-size: var(--input-small-font-size);
|
||||||
|
|
||||||
|
& .el-input__inner {
|
||||||
height: var(--input-small-height);
|
height: var(--input-small-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@b input-mini {
|
@b input-mini {
|
||||||
& .el-input__inner {
|
|
||||||
font-size: var(--input-mini-font-size);
|
font-size: var(--input-mini-font-size);
|
||||||
|
|
||||||
|
& .el-input__inner {
|
||||||
height: var(--input-mini-height);
|
height: var(--input-mini-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@b input-group {
|
@b input-group {
|
||||||
display: table;
|
display: table;
|
||||||
|
border-collapse: separate;
|
||||||
|
|
||||||
& .el-input {
|
& > .el-input__inner {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
@e label {
|
@e append, prepend {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
color: #99a9bf;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: table-cell;
|
||||||
|
position: relative;
|
||||||
|
border: var(--border-base);
|
||||||
|
border-radius: 4px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
font-size: 13px;
|
width: 1%;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
& .el-select,
|
||||||
|
& .el-button {
|
||||||
|
display: block;
|
||||||
|
margin: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .el-button,
|
||||||
|
& .el-select .el-input__inner,
|
||||||
|
& .el-select:hover .el-input__inner {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: inherit;
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
& .el-button,
|
||||||
|
& .el-input {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@e prepend {
|
@e prepend {
|
||||||
vertical-align: middle;
|
|
||||||
display: table-cell;
|
|
||||||
position: relative;
|
|
||||||
border: var(--border-base);
|
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-radius: 4px;
|
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
|
|
||||||
& .el-dropdown--text {
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@e append {
|
@e append {
|
||||||
vertical-align: middle;
|
|
||||||
display: table-cell;
|
|
||||||
position: relative;
|
|
||||||
border: var(--border-base);
|
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-radius: 4px;
|
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
& .el-input:first-child {
|
& .el-input__inner:first-child {
|
||||||
.el-input__inner {
|
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
& .el-input__inner:last-child {
|
||||||
& .el-input:last-child {
|
|
||||||
.el-input__inner {
|
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
& .el-input__inner:not(:first-child):not(:last-child) {
|
||||||
& .el-input:not(:first-child):not(:last-child) {
|
|
||||||
.el-input__inner {
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@b textarea {
|
@b textarea {
|
||||||
|
|
||||||
|
|
10
src/index.js
10
src/index.js
|
@ -9,7 +9,6 @@ import Submenu from '../packages/submenu/index.js';
|
||||||
import MenuItem from '../packages/menu-item/index.js';
|
import MenuItem from '../packages/menu-item/index.js';
|
||||||
import Input from '../packages/input/index.js';
|
import Input from '../packages/input/index.js';
|
||||||
import InputNumber from '../packages/input-number/index.js';
|
import InputNumber from '../packages/input-number/index.js';
|
||||||
import InputGroup from '../packages/input-group/index.js';
|
|
||||||
import Radio from '../packages/radio/index.js';
|
import Radio from '../packages/radio/index.js';
|
||||||
import RadioGroup from '../packages/radio-group/index.js';
|
import RadioGroup from '../packages/radio-group/index.js';
|
||||||
import RadioButton from '../packages/radio-button/index.js';
|
import RadioButton from '../packages/radio-button/index.js';
|
||||||
|
@ -50,6 +49,7 @@ import Spinner from '../packages/spinner/index.js';
|
||||||
import Message from '../packages/message/index.js';
|
import Message from '../packages/message/index.js';
|
||||||
import Card from '../packages/card/index.js';
|
import Card from '../packages/card/index.js';
|
||||||
import Rate from '../packages/rate/index.js';
|
import Rate from '../packages/rate/index.js';
|
||||||
|
import Badge from '../packages/badge/index.js';
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
if (install.installed) return;
|
if (install.installed) return;
|
||||||
|
@ -65,7 +65,6 @@ const install = function(Vue) {
|
||||||
Vue.component(MenuItem.name, MenuItem);
|
Vue.component(MenuItem.name, MenuItem);
|
||||||
Vue.component(Input.name, Input);
|
Vue.component(Input.name, Input);
|
||||||
Vue.component(InputNumber.name, InputNumber);
|
Vue.component(InputNumber.name, InputNumber);
|
||||||
Vue.component(InputGroup.name, InputGroup);
|
|
||||||
Vue.component(Radio.name, Radio);
|
Vue.component(Radio.name, Radio);
|
||||||
Vue.component(RadioGroup.name, RadioGroup);
|
Vue.component(RadioGroup.name, RadioGroup);
|
||||||
Vue.component(RadioButton.name, RadioButton);
|
Vue.component(RadioButton.name, RadioButton);
|
||||||
|
@ -103,6 +102,7 @@ const install = function(Vue) {
|
||||||
Vue.component(Message.name, Message);
|
Vue.component(Message.name, Message);
|
||||||
Vue.component(Card.name, Card);
|
Vue.component(Card.name, Card);
|
||||||
Vue.component(Rate.name, Rate);
|
Vue.component(Rate.name, Rate);
|
||||||
|
Vue.component(Badge.name, Badge);
|
||||||
|
|
||||||
Vue.use(Loading);
|
Vue.use(Loading);
|
||||||
|
|
||||||
|
@ -132,7 +132,6 @@ module.exports = {
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
InputGroup,
|
|
||||||
Radio,
|
Radio,
|
||||||
RadioGroup,
|
RadioGroup,
|
||||||
RadioButton,
|
RadioButton,
|
||||||
|
@ -170,7 +169,8 @@ module.exports = {
|
||||||
Upload,
|
Upload,
|
||||||
Progress,
|
Progress,
|
||||||
Spinner,
|
Spinner,
|
||||||
Message,
|
|
||||||
Card,
|
Card,
|
||||||
Rate
|
Rate,
|
||||||
|
Message,
|
||||||
|
Badge
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue