Parcourir la source

增加开关案例。

yangzhijie il y a 4 ans
Parent
commit
99b1f4fa93

+ 6 - 2
examples/App.vue

@@ -34,8 +34,12 @@
                     <li>
                         <router-link :to="{ path: '/desktop/print-example'}">打印控件</router-link>
                     </li>
-                    
-
+                    <li>
+                        <router-link :to="{ path: '/desktop/scanner-example'}">扫描仪控件</router-link>
+                    </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/switches-example'}">开关控件</router-link>
+                    </li>
 
                     <li>
                         <router-link :to="{ path: '/desktop/modal-example'}">模态框</router-link>

+ 8 - 0
examples/route/index.js

@@ -8,6 +8,8 @@ const NavbarExample = () => import(/* webpackChunkName: "nav-bar-example" */ '..
 const ImagePreviewExample = () => import(/* webpackChunkName: "image-preview-example" */ '../image-preview/src/ImagePreviewExample.vue')
 const PageSizeSelectExample = () => import(/* webpackChunkName: "page-size-select-example" */ '../page-size-select/src/PageSizeSelectExample.vue')
 const PrintExample = () => import(/* webpackChunkName: "print-example" */ '../print/src/PrintExample.vue')
+const ScannerExample = () => import(/* webpackChunkName: "scanner-example" */ '../scanner/src/ScannerExample.vue')
+const SwitchesExample = () => import(/* webpackChunkName: "switches-example" */ '../switches/src/SwitchesExample.vue')
 
 
 
@@ -56,6 +58,12 @@ export default {
 				/** 打印控件 */
 				{ path: 'print-example', component: PrintExample },
 
+				/** 扫描仪控件 */
+				{ path: 'scanner-example', component: ScannerExample },
+
+				/** 开关控件 */
+				{ path: 'switches-example', component: SwitchesExample },
+
 				
 
 				/** 流程报表 */

+ 34 - 0
examples/scanner/src/ScannerExample.vue

@@ -0,0 +1,34 @@
+<template>
+    <h1>扫描仪</h1>
+
+    <Scanner></Scanner>
+
+</template>
+
+<script>
+import Scanner from "@/scanner/index.js";
+
+export default {
+    data: function(){
+        return {
+
+        }
+    },
+
+    components: {
+        "Scanner": Scanner
+    },
+
+    methods: {
+        
+    },
+
+    mounted: function(){
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 82 - 0
examples/switches/src/SwitchesExample.vue

@@ -0,0 +1,82 @@
+<template>
+    <h1>开关</h1>
+
+    <Switches v-model="value0"></Switches>
+
+    <div>{{value0}}</div>
+
+
+    <h1>禁用</h1>
+
+    <Switches v-model="value1" :disabled="true"></Switches>
+
+    <div>{{value1}}</div>
+
+
+    <h1>显示文本</h1>
+
+    <Switches v-model="value2" showText="心情很好"></Switches>
+
+    <div>{{value2}}</div>
+
+
+    <h1>True/False的文本</h1>
+
+    <Switches v-model="value3" textTrueIn="心情很好" textFalseIn="心情糟糕透了"></Switches>
+
+    <div>{{value3}}</div>
+
+
+
+    <h1>样式</h1>
+    <Switches v-model="value4" color="default"></Switches>
+    <Switches v-model="value4" color="primary"></Switches>
+    <Switches v-model="value4" color="success"></Switches>
+    <Switches v-model="value4" color="info"></Switches>
+    <Switches v-model="value4" color="warning"></Switches>
+    <Switches v-model="value4" color="danger"></Switches>
+
+    <div>{{value4}}</div>
+
+
+    <h1>大图标</h1>
+
+    <Switches v-model="value5" :typeBold="true"></Switches>
+
+    <div>{{value5}}</div>
+
+</template>
+
+<script>
+import Switches from "@/switches/index.js";
+
+export default {
+    data: function(){
+        return {
+            value0: false,
+            value1: false,
+            value2: false,
+            value3: false,
+            value4: false,
+            value5: false,
+            value6: false,
+        }
+    },
+
+    components: {
+        "Switches": Switches
+    },
+
+    methods: {
+        
+    },
+
+    mounted: function(){
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

+ 11 - 6
packages/switches/src/Switches.vue

@@ -15,8 +15,11 @@
 
 module.exports = {
     name: 'Switches',
+
+
+
     props: [
-        "selected", // 选择状态, false
+        "modelValue", // 选择状态, false
         "disabled", // 禁用, false
         "showText",   // 是否显示文字提示
         "textTrueIn",  // True状态下的文字
@@ -25,12 +28,14 @@ module.exports = {
         "type-bold",    // 大图标
     ],
 
+    emits: ['update:modelValue'],
+
     data: function(){
         var tempValue = false;
         var colors = 'red';
-        if(this.selected != undefined){
-            tempValue = (this.selected == 'true' || this.selected == true);
-            if(this.selected == 'true' || this.selected == true){
+        if(this.modelValue != undefined){
+            tempValue = (this.modelValue == 'true' || this.modelValue == true);
+            if(this.modelValue == 'true' || this.modelValue == true){
             	colors = 'green';
             }else{
             	colors = 'red';
@@ -57,10 +62,10 @@ module.exports = {
     },
     watch: {
         value: function(val, oldVal) {
-            this.$emit('input', val);
+            this.$emit('update:modelValue', val);
         },
 
-        selected: function(val, oldVal) {
+        modelValue: function(val, oldVal) {
             if(val != undefined){
                 this.value = (val == 'true' || val == true);
                 if(val == 'true' || val == true){