Skip to content

E
Element
Commit 0c8159cd authored by qingwei.li's avatar qingwei.li
Browse files
Options

Fix conflict

parents 6ad98f7e af71d7b7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 752 additions and 755 deletions
components.json
View file @ 0c8159cd
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
"dialog": [ "dialog": [
"./packages/dialog/index.js" "./packages/dialog/index.js"
], ],
"cascader": [
"./packages/cascader/index.js"
],
"autocomplete": [ "autocomplete": [
"./packages/autocomplete/index.js" "./packages/autocomplete/index.js"
], ],
......
examples/docs/autocomplete.md
View file @ 0c8159cd
This diff is collapsed.
examples/docs/dialog.md
View file @ 0c8159cd
...@@ -60,96 +60,102 @@ ...@@ -60,96 +60,102 @@
## 基本用法 ## 基本用法
<el-button :plain="true" v-on:click="dialogVisible = true">点击打开 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogVisible"> <el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button :plain="true" v-on:click="openDialog">点击打开 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible"> <el-dialog title="提示" v-model="dialogVisible">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click.native="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
## 设置尺寸 ## 设置尺寸
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny"> <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span> <span>这是一段内容</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button> <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button :plain="true" v-on:click="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button> <el-button :plain="true" v-on:click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogTinyVisible" size="tiny"> <el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
<span>这是一段内容</span> <span>这是一段内容</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogTinyVisible = false">取 消</el-button> <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogTinyVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button> <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full"> <el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280" class="full-image"> <img src="http://placekitten.com/1920/1280" class="full-image">
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button> <el-button v-on:click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogFullVisible" size="full"> <el-dialog title="提示" v-model="dialogFullVisible" size="full">
<img src="http://placekitten.com/1920/1280"> <img src="http://placekitten.com/1920/1280">
</el-dialog> </el-dialog>
``` ```
## 设置能否通过点击modal或按下esc关闭dialog ## 设置能否通过点击modal或按下esc关闭dialog
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button> <el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog title="提示"
v-model="dialogStubbornVisible"
:close-on-click-modal="false"
:close-on-press-escape="false">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button> <el-button v-on:click.native="dialogStubbornVisible = true">打开 Dialog，点击 modal 或按下 esc 关闭无法将其关闭</el-button>
<el-dialog title="提示" :visible.sync="dialogStubbornVisible" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog title="提示"
v-model="dialogStubbornVisible"
:close-on-click-modal="false"
:close-on-press-escape="false">
<span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span> <span>这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息，这是一段信息</span>
</el-dialog> </el-dialog>
``` ```
## 自定义内容 ## 自定义内容
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column>
...@@ -158,11 +164,11 @@ ...@@ -158,11 +164,11 @@
</el-dialog> </el-dialog>
</div> </div>
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<div class="demo-box demo-dialog"> <div class="demo-box demo-dialog">
<el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form" v-ref:form> <el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input> <el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -174,16 +180,16 @@ ...@@ -174,16 +180,16 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
```html ```html
<el-button v-on:click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-button v-on:click.native="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"> <el-dialog title="收货地址" v-model="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column> <el-table-column property="name" label="姓名" width="200"></el-table-column>
...@@ -191,10 +197,10 @@ ...@@ -191,10 +197,10 @@
</el-table> </el-table>
</el-dialog> </el-dialog>
<el-button v-on:click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-button v-on:click.native="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-dialog title="收货地址" v-model="dialogFormVisible">
<el-form :models="form" v-ref:form> <el-form :models="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input :model.sync="form.name" auto-complete="off"></el-input> <el-input :model.sync="form.name" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -206,8 +212,8 @@ ...@@ -206,8 +212,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click.native="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> <el-button type="primary" @click.native="dialogFormVisible = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
``` ```
...@@ -226,3 +232,10 @@ ...@@ -226,3 +232,10 @@
|------|--------| |------|--------|
| - | dialog 的内容 | | - | dialog 的内容 |
| footer | dialog 按钮操作区的内容 | | footer | dialog 按钮操作区的内容 |
## 方法
每个 el-dialog 实例都暴露了如下方法，用于在不使用 v-model 的情况下打开 / 关闭实例：
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
examples/docs/input-number.md
View file @ 0c8159cd
...@@ -21,45 +21,45 @@ ...@@ -21,45 +21,45 @@
<p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p> <p>当我们需要标准的数字值时可以用到这个组件，它为你提供了数值输入提供了范围控制和递增递减的步数控制。</p>
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
``` ```
## 禁用状态 ## 禁用状态
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1" :disabled="true"></el-input-number> <el-input-number v-model="num1" :disabled="true"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1" :disabled="true"></el-input-number> <el-input-number v-model="num1" :disabled="true"></el-input-number>
``` ```
## 步数 ## 步数
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num2" :step="2"></el-input-number> <el-input-number v-model="num2" :step="2"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num2" :step="2"></el-input-number> <el-input-number v-model="num2" :step="2"></el-input-number>
``` ```
## 尺寸 ## 尺寸
<div class="demo-box demo-input-number"> <div class="demo-box demo-input-number">
<el-input-number :value.sync="num1" size="large"></el-input-number> <el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number> <el-input-number v-model="num1" size="small"></el-input-number>
</div> </div>
```html ```html
<el-input-number :value.sync="num1" size="large"></el-input-number> <el-input-number v-model="num1" size="large"></el-input-number>
<el-input-number :value.sync="num1"></el-input-number> <el-input-number v-model="num1"></el-input-number>
<el-input-number :value.sync="num1" size="small"></el-input-number> <el-input-number v-model="num1" size="small"></el-input-number>
``` ```
## API ## API
......
examples/docs/message-box.md
View file @ 0c8159cd
...@@ -65,11 +65,11 @@ ...@@ -65,11 +65,11 @@
</script> </script>
## 基本用法 ## 基本用法
<el-button @click="open">打开 Alert</el-button> <el-button @click.native="open">打开 Alert</el-button>
```html ```html
<template> <template>
<el-button @click="open">打开 Message Box</el-button> <el-button @click.native="open">打开 Message Box</el-button>
</template> </template>
<script> <script>
...@@ -85,11 +85,11 @@ ...@@ -85,11 +85,11 @@
## 返回 Promise ## 返回 Promise
<el-button @click="open2">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
```html ```html
<template> <template>
<el-button @click="open4">打开 alert</el-button> <el-button @click.native="open2">打开 alert</el-button>
</template> </template>
<script> <script>
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
</script> </script>
``` ```
<el-button @click="open3">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
```html ```html
<template> <template>
<el-button @click="open5">打开 confirm</el-button> <el-button @click.native="open3">打开 confirm</el-button>
</template> </template>
<script> <script>
...@@ -132,11 +132,11 @@ ...@@ -132,11 +132,11 @@
} }
</script> </script>
``` ```
<el-button @click="open4">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
```html ```html
<template> <template>
<el-button @click="open6">打开 prompt</el-button> <el-button @click.native="open4">打开 prompt</el-button>
</template> </template>
<script> <script>
...@@ -157,11 +157,11 @@ ...@@ -157,11 +157,11 @@
</script> </script>
``` ```
<el-button @click="open5">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open3">打开 Message Box</el-button> <el-button @click.native="open5">打开 Message Box</el-button>
</template> </template>
<script> <script>
...@@ -183,11 +183,11 @@ ...@@ -183,11 +183,11 @@
## 更多配置项 ## 更多配置项
<el-button @click="open6">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
```html ```html
<template> <template>
<el-button @click="open2">打开 Message Box</el-button> <el-button @click.native="open6">打开 Message Box</el-button>
</template> </template>
<script> <script>
......
examples/docs/notification.md
View file @ 0c8159cd
...@@ -74,12 +74,12 @@ ...@@ -74,12 +74,12 @@
## 基本用法 ## 基本用法
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open">点击展示 Notification</el-button> <el-button :plain="true" v-on:click.native="open">点击展示 Notification</el-button>
</template> </template>
<script> <script>
...@@ -99,18 +99,18 @@ ...@@ -99,18 +99,18 @@
## 带有 icon ## 带有 icon
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open2">成功</el-button> <el-button :plain="true" v-on:click.native="open2">成功</el-button>
<el-button :plain="true" v-on:click="open3">警告</el-button> <el-button :plain="true" v-on:click.native="open3">警告</el-button>
<el-button :plain="true" v-on:click="open4">消息</el-button> <el-button :plain="true" v-on:click.native="open4">消息</el-button>
<el-button :plain="true" v-on:click="open5">错误</el-button> <el-button :plain="true" v-on:click.native="open5">错误</el-button>
</template> </template>
<script> <script>
...@@ -154,12 +154,12 @@ ...@@ -154,12 +154,12 @@
## 不会自动关闭 ## 不会自动关闭
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open6">不会自动关闭的 Notification</el-button> <el-button :plain="true" v-on:click.native="open6">不会自动关闭的 Notification</el-button>
</template> </template>
<script> <script>
...@@ -179,12 +179,12 @@ ...@@ -179,12 +179,12 @@
## 回调函数 ## 回调函数
<div class="demo-box demo-notification"> <div class="demo-box demo-notification">
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</div> </div>
```html ```html
<template> <template>
<el-button :plain="true" v-on:click="open7">带有回调函数的 Notification</el-button> <el-button :plain="true" v-on:click.native="open7">带有回调函数的 Notification</el-button>
</template> </template>
<script> <script>
......
examples/docs/popover.md
View file @ 0c8159cd
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover1 ref="popover1"
placement="top-start" placement="top-start"
title="标题" title="标题"
width="200" width="200"
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover2 ref="popover2"
placement="bottom" placement="bottom"
title="标题" title="标题"
width="200" width="200"
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover3 ref="popover3"
placement="right" placement="right"
title="标题" title="标题"
width="200" width="200"
...@@ -146,13 +146,13 @@ ...@@ -146,13 +146,13 @@
<el-button v-popover:popover1>hover 激活</el-button> <el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button> <el-button v-popover:popover2>click 激活</el-button>
<el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input> <el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
</div> </div>
```html ```html
<el-popover <el-popover
v-ref:popover1 ref="popover1"
placement="top-start" placement="top-start"
title="标题" title="标题"
width="200" width="200"
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover2 ref="popover2"
placement="bottom" placement="bottom"
title="标题" title="标题"
width="200" width="200"
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
</el-popover> </el-popover>
<el-popover <el-popover
v-ref:popover3 ref="popover3"
placement="right" placement="right"
title="标题" title="标题"
width="200" width="200"
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover4 ref="popover4"
placement="right" placement="right"
width="400" width="400"
trigger="click"> trigger="click">
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
```html ```html
<el-popover <el-popover
v-ref:popover4 ref="popover4"
placement="right" placement="right"
width="400" width="400"
trigger="click"> trigger="click">
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
<div class="demo-box demo-popover"> <div class="demo-box demo-popover">
<el-popover <el-popover
v-ref:popover5 ref="popover5"
placement="top" placement="top"
width="160" width="160"
:visible.sync="visible2"> :visible.sync="visible2">
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
```html ```html
<el-popover <el-popover
v-ref:popover5 ref="popover5"
placement="top" placement="top"
width="160" width="160"
:visible.sync="visible2"> :visible.sync="visible2">
......
examples/docs/slider.md
View file @ 0c8159cd
<script> <script>
export default { export default {
data() {
return {
value1: 0,
value2: 50,
value3: null,
value4: null,
value5: null,
value6: null,
value7: null
};
},
methods: { methods: {
onChange(value) { onChange(value) {
console.log(value); console.log(value);
...@@ -10,55 +21,55 @@ ...@@ -10,55 +21,55 @@
## 基本用法 ## 基本用法
<el-slider></el-slider> <el-slider v-model="value1"></el-slider>
```html ```html
<el-slider></el-slider> <el-slider v-model="value1"></el-slider>
``` ```
## 定义初始值 ## 定义初始值
<el-slider :value="50"></el-slider> <el-slider v-model="value2"></el-slider>
```html ```html
<el-slider :value="50"></el-slider> <el-slider v-model="value2"></el-slider>
``` ```
## 定义区间 ## 定义区间
<el-slider :min="20" :max="80"></el-slider> <el-slider :min="20" :max="80" v-model="value3"></el-slider>
```html ```html
<el-slider :min="20" :max="80"></el-slider> <el-slider :min="20" :max="80" v-model="value3"></el-slider>
``` ```
## 定义步长 ## 定义步长
<el-slider :step="10"></el-slider> <el-slider :step="10" v-model="value4"></el-slider>
```html ```html
<el-slider :step="10"></el-slider> <el-slider :step="10" v-model="value4"></el-slider>
``` ```
## 显示间断点 ## 显示间断点
<el-slider :step="10" show-stops></el-slider> <el-slider :step="10" show-stops v-model="value5"></el-slider>
```html ```html
<el-slider :step="10" show-stops></el-slider> <el-slider :step="10" show-stops v-model="value5"></el-slider>
``` ```
## 带有输入框 ## 带有输入框
<el-slider show-input></el-slider> <el-slider show-input v-model="value6"></el-slider>
```html ```html
<el-slider show-input></el-slider> <el-slider show-input v-model="value6"></el-slider>
``` ```
## 回调函数 ## 回调函数
<el-slider @change="onChange"></el-slider> <el-slider @change="onChange" v-model="value7"></el-slider>
```html ```html
<template> <template>
......
examples/docs/tooltip.md
View file @ 0c8159cd
...@@ -30,73 +30,49 @@ ...@@ -30,73 +30,49 @@
} }
</style> </style>
<script>
module.exports = {
data() {
return {
value: true
}
},
computed: {
effect() {
return this.value ? 'dark' : 'light';
}
}
}
</script>
<el-switch
v-model="value"
on-text="黑色"
off-text="白色"
on-color="#1f2d3d"
off-color="#ccc">
</el-switch>
<div class="box"> <div class="box">
<div class="top"> <div class="top">
<el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button> <el-button>上左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top"> <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button> <el-button>上边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end"> <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
<el-button>上右</el-button> <el-button>上右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="left"> <div class="left">
<el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start"> <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button> <el-button>左上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left"> <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button> <el-button>左边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end"> <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-button>左下</el-button> <el-button>左下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="right"> <div class="right">
<el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start"> <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button> <el-button>右上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right"> <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button> <el-button>右边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end"> <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-button>右下</el-button> <el-button>右下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="bottom"> <div class="bottom">
<el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start"> <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button> <el-button>下左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom"> <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button> <el-button>下边</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end"> <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-button>下右</el-button> <el-button>下右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
......
package.json
View file @ 0c8159cd
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
], ],
"scripts": { "scripts": {
"dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js", "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
"dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p", "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
"deploy": "cooking build -c scripts/cooking.demo.js -p", "deploy": "cooking build -c scripts/cooking.demo.js -p",
"gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin", "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
"prepublish": "make dist" "prepublish": "make dist"
...@@ -46,8 +46,9 @@ ...@@ -46,8 +46,9 @@
"uppercamelcase": "^1.1.0", "uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.7", "vue": "^2.0.0-beta.7",
"vue-loader": "^9.3.2", "vue-loader": "^9.3.2",
"vue": "^2.0.0-beta.8",
"vue-markdown-loader": "^0.4.0", "vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.1.8", "vue-popup": "^0.2.1",
"vue-router": "^2.0.0-beta.2" "vue-router": "^2.0.0-beta.2"
} }
} }
packages/alert/src/main.vue
View file @ 0c8159cd
<template> <template>
<div class="el-alert el-alert--{{ type }}" transition="el-alert-fade" v-show="visible"> <transition name="el-alert-fade">
<i class="el-alert__icon {{ iconClass }} {{ isBigIcon }}" v-if="showIcon"></i> <div class="el-alert" :class="[ typeClass ]" v-show="visible">
<div class="el-alert__content"> <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
<span class="el-alert__title {{ isBoldTitle }}" v-if="title">{{ title }}</span> <div class="el-alert__content">
<p class="el-alert__description" v-if="description">{{ description }}</p> <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title">{{ title }}</span>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i> <p class="el-alert__description" v-if="description">{{ description }}</p>
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
</div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
...@@ -60,6 +62,10 @@ ...@@ -60,6 +62,10 @@
}, },
computed: { computed: {
typeClass() {
return `el-alert--${ this.type }`;
},
iconClass() { iconClass() {
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information'; return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
}, },
......
packages/autocomplete/package.json
View file @ 0c8159cd
...@@ -12,5 +12,6 @@ ...@@ -12,5 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>", "author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-clickoutside": "^0.1.0"
} }
} }
packages/autocomplete/src/autocomplete.vue
View file @ 0c8159cd
<template> <template>
<div class="el-autocomplete"> <div class="el-autocomplete" v-clickoutside="handleBlur">
<el-input <el-input
:value="value" :value="value"
:disabled="disabled" :disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:name = 'name' :name='name'
@onchange="handleChange" @onchange="handleChange"
@onfocus="handleFocus()" @onfocus="handleFocus"
@onblur="handleBlur()" @keydown.up.native="highlight(highlightedIndex - 1)"
@keydown.up="highlight(highlightedIndex - 1)" @keydown.down.native="highlight(highlightedIndex + 1)"
@keydown.down="highlight(highlightedIndex + 1)" @keydown.enter.native="select(highlightedIndex)"
@keydown.enter="select(highlightedIndex)"
></el-input> ></el-input>
<ul <transition name="md-fade-bottom">
v-show="showSuggestions && !loading && suggestions.length > 0" <ul
class="el-autocomplete__suggestions" v-show="suggestionVisible && !loading && suggestions.length > 0"
:class="[partial ? partial.name : '']" class="el-autocomplete__suggestions"
transition="md-fade-bottom" ref="suggestions"
v-el:suggestions >
> <li
<li :class="{'highlighted': highlightedIndex === $index}" @click="select($index)" v-for="item in suggestions">{{item.display}}</li> v-if="!customItem"
</ul> :class="{'highlighted': highlightedIndex === index}"
<div @click="select(index)"
v-show="showSuggestions && loading" v-for="(item, index) in suggestions">
class="el-autocomplete__suggestions is-loading" {{item.display}}
> </li>
<i class="el-icon-loading"></i> <component
</div> v-else
:is="customItem"
@click.native="select(index)"
v-for="(item, index) in suggestions"
:item="item"
:index="index">
</component>
</ul>
</transition>
<transition name="md-fade-bottom">
<div
v-show="suggestionVisible && loading"
class="el-autocomplete__suggestions is-loading"
>
<i class="el-icon-loading"></i>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
import ElInput from 'packages/input/index.js'; import ElInput from 'packages/input/index.js';
import Vue from 'vue';
import VueClickoutside from 'main/utils/clickoutside';
Vue.use(VueClickoutside);
export default { export default {
name: 'ElAutocomplete', name: 'ElAutocomplete',
...@@ -42,61 +60,58 @@ ...@@ -42,61 +60,58 @@
placeholder: String, placeholder: String,
disabled: Boolean, disabled: Boolean,
name: String, name: String,
suggestions: [Array, Object],
value: String, value: String,
showOnUpDown: Boolean, fetchSuggestions: Function,
partial: Object triggerOnfocus: {
type: Boolean,
default: true
},
customItem: String
}, },
data() { data() {
return { return {
showSuggestions: false, suggestions: [],
suggestionVisible: false,
inputFocusing: false, inputFocusing: false,
loading: false, loading: false,
highlightedIndex: -1 highlightedIndex: -1
}; };
}, },
created() {
if (this.partial) {
this.$options.template = this.$options.template.replace(/(item\sin\ssuggestions">)(?:.|\s)*?(<)/, '$1' + this.partial.template + '$2');
}
},
watch: {
'suggestions'(val) {
if (val && val.then) {
this.loading = true;
this.suggestions.then((res) => {
this.loading = false;
this.suggestions = res;
});
}
}
},
methods: { methods: {
handleChange(value) { handleChange(value) {
this.value = value; this.$emit('input', value);
this.showSuggestions = true; this.showSuggestions(value);
}, },
handleFocus() { handleFocus() {
if (!this.showOnUpDown) { if (this.triggerOnfocus) {
this.showSuggestions = true; this.showSuggestions(this.value);
} }
}, },
handleBlur() { handleBlur() {
this.showSuggestions = false; this.suggestionVisible = false;
}, },
select(index) { select(index) {
debugger;
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.value = this.suggestions[index].value; this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {
this.showSuggestions = false; this.suggestionVisible = false;
}); });
} }
}, },
showSuggestions(value) {
this.suggestionVisible = true;
this.loading = true;
this.fetchSuggestions(value, (suggestions) => {
this.loading = false;
this.suggestions = suggestions;
});
},
getSuggestionElement(index) { getSuggestionElement(index) {
if (!this.suggestions || !this.suggestions[index]) { if (!this.suggestions || !this.suggestions[index]) {
return null; return null;
} else { } else {
return this.$els.suggestions.children[index]; return this.$refs.suggestions.children[index];
} }
}, },
highlight(index) { highlight(index) {
...@@ -107,7 +122,7 @@ ...@@ -107,7 +122,7 @@
} }
var elSelect = this.getSuggestionElement(index); var elSelect = this.getSuggestionElement(index);
var elSuggestions = this.$els.suggestions; var elSuggestions = this.$refs.suggestions;
var scrollTop = elSuggestions.scrollTop; var scrollTop = elSuggestions.scrollTop;
var offsetTop = elSelect.offsetTop; var offsetTop = elSelect.offsetTop;
...@@ -121,7 +136,7 @@ ...@@ -121,7 +136,7 @@
this.highlightedIndex = index; this.highlightedIndex = index;
if (this.showOnUpDown) { if (this.showOnUpDown) {
this.showSuggestions = true; this.suggestionVisible = true;
} }
} }
} }
......
packages/breadcrumb/src/breadcrumb-item.vue
View file @ 0c8159cd
...@@ -6,18 +6,12 @@ ...@@ -6,18 +6,12 @@
<script> <script>
export default { export default {
name: 'ElBreadcrumbItem', name: 'ElBreadcrumbItem',
props: {
},
data() { data() {
return { return {
separator: '' separator: ''
}; };
}, },
methods: { mounted() {
},
ready() {
this.separator = this.$parent.separator; this.separator = this.$parent.separator;
} }
}; };
......
packages/breadcrumb/src/breadcrumb.vue
View file @ 0c8159cd
...@@ -12,16 +12,6 @@ ...@@ -12,16 +12,6 @@
type: String, type: String,
default: '/' default: '/'
} }
},
data() {
return {
};
},
methods: {
},
ready() {
} }
}; };
</script> </script>
packages/dialog/package.json
View file @ 0c8159cd
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"vue-popup": "^0.1.8" "vue-popup": "^0.2.1"
} }
} }
packages/dialog/src/component.vue
View file @ 0c8159cd
<template> <template>
<div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick"> <transition name="dialog-fade">
<div class="el-dialog" :class="[sizeClass, customClass]" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }"> <div class="el-dialog__wrapper" v-show="value" @click.self="handleWrapperClick">
<div class="el-dialog__header"> <div class="el-dialog" :class="[sizeClass, customClass]" ref="dialog" :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
<span class="el-dialog__title">{{title}}</span> <div class="el-dialog__header">
<div class="el-dialog__headerbtn"> <span class="el-dialog__title">{{title}}</span>
<i class="el-dialog__close el-icon el-icon-close" @click='close()'></i> <div class="el-dialog__headerbtn">
<i class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
</div>
</div>
<div class="el-dialog__body"><slot></slot></div>
<div class="el-dialog__footer">
<slot name="footer"></slot>
</div> </div>
</div> </div>
<div class="el-dialog__body"><slot></slot></div>
<slot name="footer"></slot>
</div> </div>
</div> </transition>
</template> </template>
<script> <script>
...@@ -60,9 +64,14 @@ ...@@ -60,9 +64,14 @@
}, },
watch: { watch: {
visible(val) { value(val) {
if (val) { if (val) {
this.$els.dialog.scrollTop = 0; this.$emit('open');
this.$nextTick(() => {
this.$refs.dialog.scrollTop = 0;
});
} else {
this.$emit('close');
} }
} }
}, },
...@@ -76,7 +85,7 @@ ...@@ -76,7 +85,7 @@
methods: { methods: {
handleWrapperClick() { handleWrapperClick() {
if (this.closeOnClickModal) { if (this.closeOnClickModal) {
this.visible = false; this.$emit('input', false);
} }
}, },
...@@ -85,8 +94,8 @@ ...@@ -85,8 +94,8 @@
} }
}, },
ready() { mounted() {
if (this.visible) { if (this.value) {
this.rendered = true; this.rendered = true;
this.open(); this.open();
} }
......
packages/input-number/src/input-number.vue
View file @ 0c8159cd
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
]" ]"
> >
<el-input <el-input
:value="value" v-model="currentValue"
@onchange="handleChnage" @onchange="handleChange"
:disabled="disabled" :disabled="disabled"
:size="size" :size="size"
:number="true" :number="true"
...@@ -18,17 +18,17 @@ ...@@ -18,17 +18,17 @@
<span <span
class="el-input-number__decrease el-icon-minus" class="el-input-number__decrease el-icon-minus"
:class="{'is-disabled': minDisabled}" :class="{'is-disabled': minDisabled}"
v-repeat-click="decrease()" v-repeat-click="decrease"
@mouseenter="activeInput(minDisabled)" @mouseenter="activeInput(minDisabled)"
@mouseleave="unactiveInput(minDisabled)" @mouseleave="inactiveInput(minDisabled)"
> >
</span> </span>
<span <span
class="el-input-number__increase el-icon-plus" class="el-input-number__increase el-icon-plus"
:class="{'is-disabled': maxDisabled}" :class="{'is-disabled': maxDisabled}"
v-repeat-click="increase()" v-repeat-click="increase"
@mouseenter="activeInput(maxDisabled)" @mouseenter="activeInput(maxDisabled)"
@mouseleave="unactiveInput(maxDisabled)" @mouseleave="inactiveInput(maxDisabled)"
> >
</span> </span>
</div> </div>
...@@ -41,8 +41,7 @@ ...@@ -41,8 +41,7 @@
name: 'ElInputNumber', name: 'ElInputNumber',
props: { props: {
value: { value: {
type: Number, type: Number
required: true
}, },
step: { step: {
type: Number, type: Number,
...@@ -61,13 +60,12 @@ ...@@ -61,13 +60,12 @@
}, },
directives: { directives: {
repeatClick: { repeatClick: {
bind() { bind(el, binding, vnode) {
const el = this.el;
let interval = null; let interval = null;
let startTime; let startTime;
const handler = () => { const handler = () => {
this.vm.$get(this.expression); vnode.context[binding.expression]();
}; };
const clear = function() { const clear = function() {
...@@ -93,9 +91,23 @@ ...@@ -93,9 +91,23 @@
}, },
data() { data() {
return { return {
currentValue: null,
inputActive: false inputActive: false
}; };
}, },
watch: {
value: {
immediate: true,
handler(val) {
this.currentValue = val;
}
},
currentValue(val) {
if (!isNaN(parseInt(val, 10))) {
this.$emit('input', parseInt(val, 10));
}
}
},
computed: { computed: {
minDisabled() { minDisabled() {
return this.value - this.step < this.min; return this.value - this.step < this.min;
...@@ -107,14 +119,14 @@ ...@@ -107,14 +119,14 @@
methods: { methods: {
increase() { increase() {
if (this.value + this.step > this.max || this.disabled) return; if (this.value + this.step > this.max || this.disabled) return;
this.value += this.step; this.currentValue += this.step;
if (this.maxDisabled) { if (this.maxDisabled) {
this.inputActive = false; this.inputActive = false;
} }
}, },
decrease() { decrease() {
if (this.value - this.step < this.min || this.disabled) return; if (this.value - this.step < this.min || this.disabled) return;
this.value -= this.step; this.currentValue -= this.step;
if (this.minDisabled) { if (this.minDisabled) {
this.inputActive = false; this.inputActive = false;
} }
...@@ -124,12 +136,12 @@ ...@@ -124,12 +136,12 @@
this.inputActive = true; this.inputActive = true;
} }
}, },
unactiveInput(disabled) { inactiveInput(disabled) {
if (!this.disabled && !disabled) { if (!this.disabled && !disabled) {
this.inputActive = false; this.inputActive = false;
} }
}, },
handleChnage(value) { handleChange(value) {
this.$emit('onchange', value); this.$emit('onchange', value);
} }
} }
......
packages/input/src/input.vue
View file @ 0c8159cd
...@@ -106,8 +106,11 @@ ...@@ -106,8 +106,11 @@
}, },
watch: { watch: {
'value'(val) { 'value': {
this.currentValue = val; immediate: true,
handler(val) {
this.currentValue = val;
}
}, },
'currentValue'(val) { 'currentValue'(val) {
......
packages/message-box/package.json
View file @ 0c8159cd
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"vue-popup": "^0.1.8" "vue-popup": "^0.2.1"
} }
} }
packages/message-box/src/main.js
View file @ 0c8159cd
...@@ -88,7 +88,7 @@ var showNextMsg = function() { ...@@ -88,7 +88,7 @@ var showNextMsg = function() {
initInstance(); initInstance();
} }
if (!instance.visible || instance.closeTimer) { if (!instance.value || instance.closeTimer) {
if (msgQueue.length > 0) { if (msgQueue.length > 0) {
currentMsg = msgQueue.shift(); currentMsg = msgQueue.shift();
...@@ -98,10 +98,15 @@ var showNextMsg = function() { ...@@ -98,10 +98,15 @@ var showNextMsg = function() {
instance[prop] = options[prop]; instance[prop] = options[prop];
} }
} }
instance.$appendTo(document.body); ['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape'].forEach(prop => {
if (instance[prop] === undefined) {
instance[prop] = true;
}
});
document.body.appendChild(instance.$el);
Vue.nextTick(() => { Vue.nextTick(() => {
instance.visible = true; instance.value = true;
}); });
} }
} }
...@@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) { ...@@ -188,7 +193,7 @@ MessageBox.prompt = function(message, title, options) {
}; };
MessageBox.close = function() { MessageBox.close = function() {
instance.visible = false; instance.value = false;
msgQueue = []; msgQueue = [];
currentMsg = null; currentMsg = null;
}; };
......
packages/message-box/src/main.vue
View file @ 0c8159cd
<template> <template>
<div class="el-message-box__wrapper"> <div class="el-message-box__wrapper">
<div class="el-message-box" v-if="rendered" v-show="visible" transition="msgbox-bounce"> <transition name="msgbox-bounce">
<div class="el-message-box__header" v-if="title !== ''"> <div class="el-message-box" v-show="value">
<div class="el-message-box__title">{{ title }}</div> <div class="el-message-box__header" v-if="title !== ''">
<i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i> <div class="el-message-box__title">{{ title }}</div>
</div> <i class="el-message-box__close el-icon-close" @click="handleAction('cancel')" v-if="showClose"></i>
<div class="el-message-box__content" v-if="message !== ''"> </div>
<div class="el-message-box__status {{ typeClass }}"></div> <div class="el-message-box__content" v-if="message !== ''">
<div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div> <div class="el-message-box__status" :class="[ typeClass ]"></div>
<div class="el-message-box__input" v-show="showInput"> <div class="el-message-box__message" :style="{ 'margin-left': type ? '50px' : '0' }"><p>{{ message }}</p></div>
<input type="text" v-model="inputValue" :placeholder="inputPlaceholder" v-el:input /> <div class="el-message-box__input" v-show="showInput">
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div> <input type="text" v-model="inputValue" :placeholder="inputPlaceholder" ref="input" />
<div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{editorErrorMessage}}</div>
</div>
</div>
<div class="el-message-box__btns">
<el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
</div> </div>
</div> </div>
<div class="el-message-box__btns"> </transition>
<el-button class="{{ cancelButtonClasses }}" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button class="{{ confirmButtonClasses }}" v-show="showConfirmButton" @click="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
</div>
</div>
</div> </div>
</template> </template>
...@@ -34,8 +36,6 @@ ...@@ -34,8 +36,6 @@
import Popup from 'vue-popup'; import Popup from 'vue-popup';
export default { export default {
name: 'el-message-box',
mixins: [ Popup ], mixins: [ Popup ],
props: { props: {
...@@ -68,12 +68,27 @@ ...@@ -68,12 +68,27 @@
}, },
methods: { methods: {
doClose() {
this.value = false;
this._closing = true;
this.onClose && this.onClose();
if (this.modal) {
document.body.style.overflow = this.bodyOverflow;
}
if (!this.transition) {
this.doAfterClose();
}
},
handleAction(action) { handleAction(action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) { if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return; return;
} }
var callback = this.callback; var callback = this.callback;
this.visible = false; this.value = false;
callback(action); callback(action);
}, },
...@@ -109,11 +124,11 @@ ...@@ -109,11 +124,11 @@
} }
}, },
visible(val) { value(val) {
if (val && this.$type === 'prompt') { if (val && this.$type === 'prompt') {
setTimeout(() => { setTimeout(() => {
if (this.$els.input) { if (this.$refs.input) {
this.$els.input.focus(); this.$refs.input.focus();
} }
}, 500); }, 500);
} }
......
packages/notification/src/main.js
View file @ 0c8159cd
import Vue from 'vue'; import Vue from 'vue';
var NotificationConstructor = Vue.extend(require('./main.vue')); let NotificationConstructor = Vue.extend(require('./main.vue'));
var instance; let instance;
var instances = []; let instances = [];
var seed = 1; let seed = 1;
var Notification = function(options) { var Notification = function(options) {
options = options || {}; options = options || {};
var userOnClose = options.onClose; let userOnClose = options.onClose;
var id = 'notification_' + seed++; let id = 'notification_' + seed++;
options.onClose = function() { options.onClose = function() {
Notification.close(id, userOnClose); Notification.close(id, userOnClose);
...@@ -19,11 +19,12 @@ var Notification = function(options) { ...@@ -19,11 +19,12 @@ var Notification = function(options) {
}); });
instance.id = id; instance.id = id;
instance.vm = instance.$mount(); instance.vm = instance.$mount();
instance.vm.$appendTo('body'); document.body.appendChild(instance.vm.$el);
instance.vm.visible = true;
instance.dom = instance.vm.$el; instance.dom = instance.vm.$el;
var topDist = 0; let topDist = 0;
for (var i = 0, len = instances.length; i < len; i++) { for (let i = 0, len = instances.length; i < len; i++) {
topDist += instances[i].$el.offsetHeight + 16; topDist += instances[i].$el.offsetHeight + 16;
} }
topDist += 16; topDist += 16;
...@@ -32,13 +33,15 @@ var Notification = function(options) { ...@@ -32,13 +33,15 @@ var Notification = function(options) {
}; };
Notification.close = function(id, userOnClose) { Notification.close = function(id, userOnClose) {
let index;
let removedHeight;
for (var i = 0, len = instances.length; i < len; i++) { for (var i = 0, len = instances.length; i < len; i++) {
if (id === instances[i].id) { if (id === instances[i].id) {
if (typeof userOnClose === 'function') { if (typeof userOnClose === 'function') {
userOnClose(instances[i]); userOnClose(instances[i]);
} }
var index = i; index = i;
var removedHeight = instances[i].dom.offsetHeight; removedHeight = instances[i].dom.offsetHeight;
instances.splice(i, 1); instances.splice(i, 1);
break; break;
} }
...@@ -46,7 +49,7 @@ Notification.close = function(id, userOnClose) { ...@@ -46,7 +49,7 @@ Notification.close = function(id, userOnClose) {
if (len > 1) { if (len > 1) {
for (i = index; i < len - 1 ; i++) { for (i = index; i < len - 1 ; i++) {
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 10 + 'px'; instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 16 + 'px';
} }
} }
}; };
......
packages/notification/src/main.vue
View file @ 0c8159cd
<template> <template>
<div class="el-notification" transition="el-notification-fade" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()"> <transition name="el-notification-fade">
<i class="el-notification__icon el-icon-{{typeClass}}" v-if="type"></i> <div class="el-notification" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer()" @mouseleave="startTimer()">
<div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }"> <i class="el-notification__icon" :class="[ typeClass ]" v-if="type"></i>
<span>{{ title }}</span> <div class="el-notification__group" :style="{ 'margin-left': type ? '55px' : '0' }">
<p>{{ message }}</p> <span>{{ title }}</span>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div> <p>{{ message }}</p>
<div class="el-notification__closeBtn el-icon-close" @click="handleClose()"></div>
</div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/babel"> <script type="text/babel">
...@@ -18,10 +20,9 @@ ...@@ -18,10 +20,9 @@
}; };
export default { export default {
name: 'ElNotification',
data() { data() {
return { return {
visible: false,
title: '', title: '',
message: '', message: '',
duration: 4500, duration: 4500,
...@@ -36,14 +37,18 @@ ...@@ -36,14 +37,18 @@
computed: { computed: {
typeClass() { typeClass() {
return this.type ? typeMap[this.type] : ''; return this.type ? `el-icon-${ typeMap[this.type] }` : '';
} }
}, },
watch: { watch: {
closed(newVal) { closed(newVal) {
if (newVal) { if (newVal) {
this.$destroy(true); this.visible = false;
this.$el.addEventListener('transitionend', () => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
});
} }
} }
}, },
...@@ -71,7 +76,7 @@ ...@@ -71,7 +76,7 @@
} }
}, },
ready() { mounted() {
if (this.duration > 0) { if (this.duration > 0) {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
if (!this.closed) { if (!this.closed) {
......
packages/popover/src/main.vue
View file @ 0c8159cd
<template> <template>
<div <transition :name="transition">
class="el-popover" <div
v-el:popper class="el-popover"
v-show="visible" ref="popper"
:transition="transition" v-show="showPopper"
:style="{ width: width + 'px' }"> :style="{ width: width + 'px' }">
<div class="el-popover__title" v-if="title" v-text="title"></div> <div class="el-popover__title" v-if="title" v-text="title"></div>
<slot>{{ content }}</slot> <slot>{{ content }}</slot>
</div> </div>
</transition>
</template> </template>
<script> <script>
...@@ -16,10 +17,8 @@ import Vue from 'vue'; ...@@ -16,10 +17,8 @@ import Vue from 'vue';
import { on, off } from 'wind-dom/src/event'; import { on, off } from 'wind-dom/src/event';
Vue.directive('popover', { Vue.directive('popover', {
update() { bind(el, binding, vnode) {
this.vm.$nextTick(() => { vnode.context.$refs[binding.arg].$refs.reference = el;
this.vm.$refs[this.arg].reference = this.el;
});
} }
}); });
...@@ -36,9 +35,7 @@ export default { ...@@ -36,9 +35,7 @@ export default {
}, },
title: String, title: String,
content: String, content: String,
reference: { reference: {},
default: 'body'
},
width: {}, width: {},
visibleArrow: { visibleArrow: {
default: true default: true
...@@ -56,61 +53,64 @@ export default { ...@@ -56,61 +53,64 @@ export default {
} }
}, },
ready() { mounted() {
let _timer; let _timer;
const reference = this.reference || this.$refs.reference;
this.$nextTick(() => { this.$nextTick(() => {
if (this.trigger === 'click') { if (this.trigger === 'click') {
on(this.reference, 'click', () => { this.visible = !this.visible; }); on(reference, 'click', () => { this.showPopper = !this.showPopper; });
on(document, 'click', (e) => { on(document, 'click', (e) => {
if (!this.$el || if (!this.$el ||
!this.reference || !reference ||
this.$el.contains(e.target) || this.$el.contains(e.target) ||
this.reference.contains(e.target)) return; reference.contains(e.target)) return;
this.visible = false; this.showPopper = false;
}); });
} else if (this.trigger === 'hover') { } else if (this.trigger === 'hover') {
on(this.reference, 'mouseenter', () => { on(reference, 'mouseenter', () => {
this.visible = true; this.showPopper = true;
clearTimeout(_timer); clearTimeout(_timer);
}); });
on(this.reference, 'mouseleave', () => { on(reference, 'mouseleave', () => {
_timer = setTimeout(() => { _timer = setTimeout(() => {
this.visible = false; this.showPopper = false;
}, 200); }, 200);
}); });
} else { } else {
if (this.reference.hasChildNodes()) { if ([].slice.call(reference.children).length) {
const children = this.reference.childNodes; const children = reference.childNodes;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (children[i].nodeName === 'INPUT') { if (children[i].nodeName === 'INPUT') {
on(children[i], 'focus', () => { this.visible = true; }); on(children[i], 'focus', () => { this.showPopper = true; });
on(children[i], 'blur', () => { this.visible = false; }); on(children[i], 'blur', () => { this.showPopper = false; });
break; break;
} }
} }
} else if ( } else if (
this.reference.nodeName === 'INPUT' || reference.nodeName === 'INPUT' ||
this.reference.nodeName === 'TEXTAREA' reference.nodeName === 'TEXTAREA'
) { ) {
on(this.reference, 'focus', () => { this.visible = true; }); on(reference, 'focus', () => { this.showPopper = true; });
on(this.reference, 'blur', () => { this.visible = false; }); on(reference, 'blur', () => { this.showPopper = false; });
} else { } else {
on(this.reference, 'mousedown', () => { this.visible = true; }); on(reference, 'mousedown', () => { this.showPopper = true; });
on(this.reference, 'mouseup', () => { this.visible = false; }); on(reference, 'mouseup', () => { this.showPopper = false; });
} }
} }
}); });
}, },
destroyed() { destroyed() {
off(this.reference, 'mouseup'); const reference = this.reference || this.$refs.reference;
off(this.reference, 'mousedown');
off(this.reference, 'focus'); off(reference, 'mouseup');
off(this.reference, 'blur'); off(reference, 'mousedown');
off(this.reference, 'mouseleave'); off(reference, 'focus');
off(this.reference, 'mouseenter'); off(reference, 'blur');
off(reference, 'mouseleave');
off(reference, 'mouseenter');
} }
}; };
</script> </script>
packages/slider/src/main.vue
View file @ 0c8159cd
<template> <template>
<div class="el-slider"> <div class="el-slider">
<el-input-number <el-input-number
:value.sync="value" v-model="inputValue"
v-if="showInput" v-if="showInput"
class="el-slider__input" class="el-slider__input"
@keyup="onInputChange()" @keyup.native="onInputChange()"
v-el:input ref="input"
:step="step" :step="step"
:min="min" :min="min"
:max="max" :max="max"
...@@ -13,12 +13,14 @@ ...@@ -13,12 +13,14 @@
</el-input-number> </el-input-number>
<div class="el-slider__runway" <div class="el-slider__runway"
:class="{ 'show-input': showInput }" :class="{ 'show-input': showInput }"
@click="onSliderClick($event)" v-el:slider> @click="onSliderClick" ref="slider">
<div class="el-slider__bar" :style="{ width: currentPosition }"></div> <div class="el-slider__bar" :style="{ width: currentPosition }"></div>
<div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" v-el:button> <div class="el-slider__button-wrapper" @mouseenter="hovering = true" @mouseleave="hovering = false" :style="{left: currentPosition}" ref="button">
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div> <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
</div> </div>
<div class="el-slider__pop" v-show="showTip" transition="popper-fade" v-el:pop>{{ value }}</div> <transition name="popper-fade">
<div class="el-slider__pop" v-show="showTip" transition="popper-fade" ref="pop">{{ value }}</div>
</transition>
<div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div> <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
</div> </div>
</div> </div>
...@@ -69,6 +71,8 @@ ...@@ -69,6 +71,8 @@
data() { data() {
return { return {
inputValue: null,
timeout: null,
showTip: false, showTip: false,
hovering: false, hovering: false,
dragging: false, dragging: false,
...@@ -80,18 +84,22 @@ ...@@ -80,18 +84,22 @@
}, },
watch: { watch: {
inputValue(val) {
this.$emit('input', val);
},
showTip(val) { showTip(val) {
if (val) { if (val) {
this.$nextTick(() => { this.$nextTick(() => {
this.updatePopper(); this.updatePopper();
}); });
} else { } else {
setTimeout(() => { this.timeout = setTimeout(() => {
if (this.popper) { if (this.popper) {
this.popper.destroy(); this.popper.destroy();
this.popper = null; this.popper = null;
} }
}, 150); }, 300);
} }
}, },
...@@ -100,30 +108,37 @@ ...@@ -100,30 +108,37 @@
this.updatePopper(); this.updatePopper();
}); });
if (val < this.min) { if (val < this.min) {
this.value = this.min; this.$emit('input', this.min);
return; return;
} }
if (val > this.max) { if (val > this.max) {
this.value = this.max; this.$emit('input', this.max);
return; return;
} }
this.inputValue = val;
this.setPosition((val - this.min) * 100 / (this.max - this.min)); this.setPosition((val - this.min) * 100 / (this.max - this.min));
} }
}, },
methods: { methods: {
handlePopperStyle() {
let placementMap = { top: 'bottom', bottom: 'top' };
let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
this.popper._popper.classList.add(placement);
this.popper._popper.classList.remove(placementMap[placement]);
this.popper._popper.style.transformOrigin = `center ${ origin }`;
},
updatePopper() { updatePopper() {
if (this.popper) { if (this.popper) {
clearTimeout(this.timeout);
this.popper.update(); this.popper.update();
this.handlePopperStyle();
} else { } else {
this.popper = new Popper(this.$els.button, this.$els.pop, { gpuAcceleration: false, placement: 'top' }); this.popper = new Popper(this.$refs.button, this.$refs.pop, { gpuAcceleration: false, placement: 'top' });
this.popper.onCreate(() => { this.popper.onCreate(() => {
let placementMap = { top: 'bottom', bottom: 'top' }; this.handlePopperStyle();
let placement = this.popper._popper.getAttribute('x-placement').split('-')[0];
let origin = placementMap[placement];
this.popper._popper.classList.add(placement);
this.popper._popper.classList.remove(placementMap[placement]);
this.popper._popper.style.transformOrigin = `center ${ origin }`;
}); });
this.updatePopper(); this.updatePopper();
} }
...@@ -133,7 +148,7 @@ ...@@ -133,7 +148,7 @@
if (newPos >= 0 && (newPos <= 100)) { if (newPos >= 0 && (newPos <= 100)) {
var lengthPerStep = 100 / ((this.max - this.min) / this.step); var lengthPerStep = 100 / ((this.max - this.min) / this.step);
var steps = Math.round(newPos / lengthPerStep); var steps = Math.round(newPos / lengthPerStep);
this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min); this.$emit('input', Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min));
this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%'; this.currentPosition = (this.value - this.min) / (this.max - this.min) * 100 + '%';
if (!this.dragging) { if (!this.dragging) {
if (this.value !== this.oldValue) { if (this.value !== this.oldValue) {
...@@ -146,8 +161,7 @@ ...@@ -146,8 +161,7 @@
onSliderClick(event) { onSliderClick(event) {
var currentX = event.clientX; var currentX = event.clientX;
var sliderOffsetLeft; var sliderOffsetLeft = getStyle(this.$el.parentNode, 'position') === 'static' ? this.$refs.slider.offsetLeft : this.$el.parentNode.offsetLeft + this.$refs.slider.offsetLeft;
getStyle(this.$el.parentNode, 'position') === 'static' ? sliderOffsetLeft = this.$els.slider.offsetLeft : sliderOffsetLeft = this.$el.parentNode.offsetLeft + this.$els.slider.offsetLeft;
var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100; var newPos = (currentX - sliderOffsetLeft) / this.$sliderWidth * 100;
this.setPosition(newPos); this.setPosition(newPos);
}, },
...@@ -164,7 +178,7 @@ ...@@ -164,7 +178,7 @@
computed: { computed: {
$sliderWidth() { $sliderWidth() {
return parseInt(getStyle(this.$els.slider, 'width'), 10); return parseInt(getStyle(this.$refs.slider, 'width'), 10);
}, },
showTip() { showTip() {
...@@ -183,7 +197,7 @@ ...@@ -183,7 +197,7 @@
} }
}, },
compiled() { mounted() {
var startX = 0; var startX = 0;
var currentX = 0; var currentX = 0;
var startPos = 0; var startPos = 0;
...@@ -212,7 +226,7 @@ ...@@ -212,7 +226,7 @@
} }
}; };
this.$els.button.addEventListener('mousedown', function(event) { this.$refs.button.addEventListener('mousedown', function(event) {
onDragStart(event); onDragStart(event);
window.addEventListener('mousemove', onDragging); window.addEventListener('mousemove', onDragging);
window.addEventListener('mouseup', onDragEnd); window.addEventListener('mouseup', onDragEnd);
...@@ -220,9 +234,10 @@ ...@@ -220,9 +234,10 @@
}, },
created() { created() {
if (this.value < this.min || this.value > this.max) { if (typeof this.value !== 'number' || this.value < this.min || this.value > this.max) {
this.value = this.min; this.$emit('input', this.min);
} }
this.inputValue = this.inputValue || this.value;
}, },
beforeDestroy() { beforeDestroy() {
......
packages/theme-default/src/alert.css
View file @ 0c8159cd
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
color: #fff; color: #fff;
opacity: 1; opacity: 1;
display: table; display: table;
transition: opacity .2s;
@modifier success { @modifier success {
background-color: #13ce66; background-color: #13ce66;
...@@ -78,12 +79,8 @@ ...@@ -78,12 +79,8 @@
} }
} }
.el-alert-fade-transition {
transition: opacity .2s;
}
.el-alert-fade-enter, .el-alert-fade-enter,
.el-alert-fade-leave { .el-alert-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }
packages/theme-default/src/common/transition.css
View file @ 0c8159cd
...@@ -6,11 +6,16 @@ ...@@ -6,11 +6,16 @@
transition: var(--fade-transition); transition: var(--fade-transition);
} }
.fade-in-linear-transition { .fade-in-linear-enter-active {
opacity: 1; opacity: 1;
transition: var(--fade-linear-transition); transition: var(--fade-linear-transition);
} }
.fade-in-linear-leave-active {
opacity: 0;
transition: var(--fade-linear-transition);
}
.fade-in-enter, .fade-in-enter,
.fade-in-leave, .fade-in-leave,
.fade-in-linear-enter, .fade-in-linear-enter,
...@@ -23,28 +28,28 @@ ...@@ -23,28 +28,28 @@
transition: all .3s cubic-bezier(.55,0,.1,1); transition: all .3s cubic-bezier(.55,0,.1,1);
} }
.md-fade-center-enter, .md-fade-center-enter,
.md-fade-center-leave { .md-fade-center-leave,
opacity: 0;
transform: scaleY(0);
}
.md-fade-center-leave-active { .md-fade-center-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-bottom-transition { .md-fade-bottom-enter-active,
.md-fade-bottom-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: center top; transform-origin: center top;
} }
.md-fade-bottom-enter, .md-fade-bottom-enter,
.md-fade-bottom-leave { .md-fade-bottom-leave,
.md-fade-bottom-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-top-transition { .md-fade-top-enter-active,
.md-fade-top-leave-active {
opacity: 1; opacity: 1;
transform: scaleY(1); transform: scaleY(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
...@@ -52,40 +57,47 @@ ...@@ -52,40 +57,47 @@
} }
.md-fade-top-enter, .md-fade-top-enter,
.md-fade-top-leave { .md-fade-top-leave,
.md-fade-top-leave-active {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.md-fade-left-transition { .md-fade-left-enter-active,
.md-fade-left-leave-active {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: right center; transform-origin: right center;
} }
.md-fade-left-enter, .md-fade-left-enter,
.md-fade-left-leave { .md-fade-left-leave,
.md-fade-left-leave-active {
opacity: 0; opacity: 0;
transform: scaleX(0); transform: scaleX(0);
} }
.md-fade-right-transition { .md-fade-right-enter-active,
.md-fade-right-leave-active {
opacity: 1; opacity: 1;
transform: scaleX(1); transform: scaleX(1);
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: left center; transform-origin: left center;
} }
.md-fade-right-enter, .md-fade-right-enter,
.md-fade-right-leave { .md-fade-right-leave,
.md-fade-right-leave-active {
opacity: 0; opacity: 0;
transform: scaleX(0); transform: scaleX(0);
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active,
.fade-leave-active {
transition: opacity .3s cubic-bezier(.645,.045,.355,1); transition: opacity .3s cubic-bezier(.645,.045,.355,1);
} }
.fade-enter, .fade-enter,
.fade-leave { .fade-leave,
.fade-leave-active {
opacity: 0; opacity: 0;
} }
......
packages/theme-default/src/dialog.css
View file @ 0c8159cd
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
position: relative; position: relative;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
overflow: hidden;
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
...@@ -69,20 +68,18 @@ ...@@ -69,20 +68,18 @@
float: right; float: right;
} }
& *[slot=footer] { @e footer {
padding: 10px 20px 15px; padding: 10px 20px 15px;
text-align: right; text-align: right;
width: 100%;
display: block;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.dialog-fade-enter { .dialog-fade-enter-active {
animation: dialog-fade-in .3s; animation: dialog-fade-in .3s;
} }
.dialog-fade-leave { .dialog-fade-leave-active {
animation: dialog-fade-out .3s; animation: dialog-fade-out .3s;
} }
......
packages/theme-default/src/message-box.css
View file @ 0c8159cd
...@@ -115,12 +115,12 @@ ...@@ -115,12 +115,12 @@
} }
} }
.msgbox-bounce-enter { .msgbox-bounce-enter-active {
-webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); -webkit-animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5); animation: msgbox-bounce-in .3s cubic-bezier(0.3, 0, 0, 1.5);
} }
.msgbox-bounce-leave { .msgbox-bounce-leave-active {
-webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22); animation: msgbox-bounce-out .2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
} }
......
packages/theme-default/src/notification.css
View file @ 0c8159cd
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
right: 0; right: 0;
} }
.el-notification-fade-leave { .el-notification-fade-leave-active {
opacity: 0; opacity: 0;
} }
} }
packages/theme-default/src/slider.css
View file @ 0c8159cd
...@@ -74,6 +74,8 @@ ...@@ -74,6 +74,8 @@
color: #fff; color: #fff;
cursor: default; cursor: default;
z-index: var(--index-top); z-index: var(--index-top);
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
&::before { &::before {
triangle: 9px top #20A0FF; triangle: 9px top #20A0FF;
...@@ -106,13 +108,8 @@ ...@@ -106,13 +108,8 @@
transform: translateX(-50%); transform: translateX(-50%);
} }
.popper-fade-transition {
transition: transform .3s, opacity .3s;
transform-origin: center bottom;
}
.popper-fade-enter, .popper-fade-enter,
.popper-fade-leave { .popper-fade-leave-active {
transform: scale(0.1); transform: scale(0.1);
opacity: 0; opacity: 0;
} }
......
packages/tooltip/src/main.vue
View file @ 0c8159cd
<template> <template>
<div <div
class="el-tooltip" class="el-tooltip"
@mouseenter="visible = true" @mouseenter="showPopper = true"
@mouseleave="visible = false"> @mouseleave="showPopper = false">
<div class="el-tooltip__rel" v-el:reference> <div class="el-tooltip__rel" ref="reference">
<slot></slot> <slot></slot>
</div> </div>
<div <transition :name="transition">
class="el-tooltip__popper" <div
:class="['is-' + effect]" class="el-tooltip__popper"
v-el:popper :class="['is-' + effect]"
v-show="!disabled && visible" ref="popper"
:transition="transition"> v-show="!disabled && showPopper">
<slot name="content"><div v-text="content"></div></slot> <slot name="content"><div v-text="content"></div></slot>
</div> </div>
</transition>
</div> </div>
</template> </template>
......
src/index.js
View file @ 0c8159cd
This diff is collapsed.
src/utils/vue-popper.js
View file @ 0c8159cd
...@@ -34,9 +34,21 @@ export default { ...@@ -34,9 +34,21 @@ export default {
} }
}, },
data() {
return {
showPopper: false
};
},
watch: { watch: {
'visible'(val) { visible: {
if (this.popperDestroying) return; immediate: true,
handler(val) {
this.showPopper = val;
}
},
showPopper(val) {
val ? this.updatePopper() : this.destroyPopper(); val ? this.updatePopper() : this.destroyPopper();
} }
}, },
...@@ -47,32 +59,32 @@ export default { ...@@ -47,32 +59,32 @@ export default {
return; return;
} }
this.popper = this.popper || this.$refs.popper; const options = this.options;
this.reference = this.reference || this.$refs.reference; const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference;
if (!this.popper || !this.reference) {
return;
}
if (!popper || !reference) return;
if (this.visibleArrow) { if (this.visibleArrow) {
this.appendArrow(this.popper); this.appendArrow(popper);
} }
if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) { if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
this.popperJS.destroy(); this.popperJS.destroy();
} }
this.$set('options.placement', this.placement); options.placement = this.placement;
this.$set('options.offset', this.offset); options.offset = this.offset;
this.popperJS = new PopperJS( this.$nextTick(() => {
this.reference, this.popperJS = new PopperJS(
this.popper, reference,
this.options popper,
); options
this.popperJS.onCreate(popper => { );
this.resetTransformOrigin(popper); this.popperJS.onCreate(popper => {
this.$emit('created', this); this.resetTransformOrigin(popper);
this.$emit('created', this);
});
}); });
}, },
...@@ -85,7 +97,7 @@ export default { ...@@ -85,7 +97,7 @@ export default {
}, },
doDestroy() { doDestroy() {
if (this.visible) return; if (this.showPopper) return;
this.popperJS._popper.removeEventListener('transitionend', this.doDestroy); this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
this.popperJS.destroy(); this.popperJS.destroy();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment