Skip to content

Commit

Permalink
fix: update examples md
Browse files Browse the repository at this point in the history
  • Loading branch information
@Liaogming
Liaogming committed Oct 16, 2020
1 parent 28dcaa6 commit 9b0f08a
Show file tree
Hide file tree
Showing 5 changed files with 299 additions and 170 deletions.
70 changes: 39 additions & 31 deletions examples/docs/zh-CN/popover.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
width="200"
trigger="focus"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover> -->
<!-- <el-button v-popover>focus 激活</el-button> -->
</el-popover>
<el-button v-popover>focus 激活</el-button> -->

<el-popover
placement="bottom"
Expand All @@ -52,11 +52,13 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
</template>

<script>
import {ref} from 'vue'
export default {
data() {
setup(){
const visible = ref(false)
return {
visible: false
};
visible
}
}
};
</script>
Expand Down Expand Up @@ -84,27 +86,31 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
</el-popover>

<script>
import {reactive, toRefs} from 'vue'
export default {
data() {
setup(){
const data = reactive({
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
})
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
};
...toRefs(data)
}
}
};
</script>
Expand Down Expand Up @@ -132,13 +138,15 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
</el-popover>

<script>
export default {
data() {
return {
visible: false,
};
}
}
import {ref} from 'vue'
export default {
setup(){
const visible = ref(false)
return {
visible
}
}
};
</script>
```
:::
Expand Down
94 changes: 58 additions & 36 deletions examples/docs/zh-CN/progress.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@

<script>
export default {
methods: {
format(percentage) {
return percentage === 100 ? '满' : `${percentage}%`;
setup(){
const format = percentage => {
return percentage === 100 ? '满' : `${percentage}%`
}
return {format}
}
};
</script>
Expand Down Expand Up @@ -59,42 +60,54 @@
</div>

<script>
import {ref, reactive, getCurrentInstance, toRefs} from 'vue'
export default {
data() {
return {
percentage: 20,
customColor: '#409eff',
setup(){
const self = getCurrentInstance().ctx
const percentage = ref(20)
const customColor = ref('#409eff')
const data = reactive({
customColors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
customColorMethod(percentage) {
})
const customColorMethod = percentage => {
if (percentage < 30) {
return '#909399';
} else if (percentage < 70) {
return '#e6a23c';
} else {
return '#67c23a';
}
},
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
}
const increase = ()=>{
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
const decrease = ()=> {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
}
return {
percentage,
customColor,
...toRefs(data),
customColorMethod,
increase,
decrease
}
}
}
</script>
Expand Down Expand Up @@ -131,32 +144,41 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
</div>

<script>
import {ref, reactive, getCurrentInstance, toRefs} from 'vue'
export default {
data() {
return {
percentage: 10,
setup(){
const self = getCurrentInstance().ctx
const percentage = ref(10)
const data = reactive({
colors: [
{color: '#f56c6c', percentage: 20},
{color: '#e6a23c', percentage: 40},
{color: '#5cb87a', percentage: 60},
{color: '#1989fa', percentage: 80},
{color: '#6f7ad3', percentage: 100}
]
};
},
methods: {
increase() {
this.percentage += 10;
if (this.percentage > 100) {
this.percentage = 100;
})
const increase = ()=>{
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
},
decrease() {
this.percentage -= 10;
if (this.percentage < 0) {
this.percentage = 0;
}
const decrease = ()=> {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
}
return {
percentage,
...toRefs(data),
increase,
decrease
}
}
}
</script>
Expand Down
37 changes: 26 additions & 11 deletions examples/docs/zh-CN/rate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,18 @@
</div>

<script>
import {ref, reactive, toRefs} from 'vue'
export default {
data() {
return {
value1: null,
value2: null,
setup(){
const value1 = ref(null)
const value2 = ref(null)
const data = reactive({
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
})
return {
value1,
value2,
...toRefs(data)
}
}
}
Expand All @@ -44,10 +50,12 @@
</el-rate>

<script>
import {ref} from 'vue'
export default {
data() {
setup(){
const value = ref(null)
return {
value: null
value
}
}
}
Expand All @@ -69,11 +77,16 @@
</el-rate>

<script>
import {ref, reactive, toRefs} from 'vue'
export default {
data() {
return {
value: null,
setup(){
const value = ref(null)
const data = reactive({
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
})
return {
value,
...toRefs(data)
}
}
}
Expand All @@ -96,10 +109,12 @@
</el-rate>

<script>
import {ref} from 'vue'
export default {
data() {
setup(){
const value = ref(3.7)
return {
value: 3.7
value
}
}
}
Expand Down
Loading

0 comments on commit 9b0f08a

Please sign in to comment.