vue2-client 1.15.24 → 1.15.26-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,105 +1,105 @@
1
- <template>
2
- <div class="demo-container">
3
- <h2>XFormItem Demo</h2>
4
-
5
- <!-- 查询模式演示 -->
6
- <div class="demo-section">
7
- <h3>查询模式</h3>
8
- <x-form-item
9
- :attr="queryAttr"
10
- :form="queryForm"
11
- mode="查询"
12
- :showLabel="true"
13
- />
14
- <div class="value-display">
15
- 当前值: {{ queryForm.rate || '未选择' }}
16
- </div>
17
- </div>
18
-
19
- <!-- 新增模式演示 -->
20
- <div class="demo-section">
21
- <h3>新增模式</h3>
22
- <x-form-item
23
- :attr="addAttr"
24
- :form="addForm"
25
- mode="新增/修改"
26
- :showLabel="true"
27
- />
28
- <div class="value-display">
29
- 当前值: {{ addForm.rate || '未评分' }}
30
- </div>
31
- </div>
32
- </div>
33
- </template>
34
-
35
- <script>
36
- import XFormItem from './XFormItem.vue'
37
-
38
- export default {
39
- name: 'XFormItemDemo',
40
- components: {
41
- XFormItem
42
- },
43
- data () {
44
- return {
45
- // 查询表单配置
46
- queryAttr: {
47
- type: 'rate',
48
- name: '评分查询',
49
- queryType: 'IN',
50
- model: 'rate',
51
- placeholder: '请选择评分',
52
- allowHalf: true,
53
- maxCount: 5
54
- },
55
- queryForm: {
56
- },
57
-
58
- // 新增表单配置
59
- addAttr: {
60
- type: 'rate',
61
- name: '评分',
62
- model: 'rate',
63
- allowHalf: true,
64
- maxCount: 10
65
- },
66
- addForm: {
67
- rate: 3
68
- }
69
- }
70
- }
71
- }
72
- </script>
73
-
74
- <style lang="less" scoped>
75
- .demo-container {
76
- padding: 20px;
77
- max-width: 800px;
78
- margin: 0 auto;
79
- background-color: #f5f5f5;
80
-
81
- h2 {
82
- margin-bottom: 20px;
83
- color: #1890ff;
84
- }
85
-
86
- .demo-section {
87
- margin-bottom: 30px;
88
- padding: 20px;
89
- border: 1px solid #e8e8e8;
90
- border-radius: 4px;
91
-
92
- h3 {
93
- margin-bottom: 16px;
94
- color: #333;
95
- }
96
-
97
- .value-display {
98
- margin-top: 16px;
99
- padding: 8px;
100
- background-color: #f5f5f5;
101
- border-radius: 4px;
102
- }
103
- }
104
- }
105
- </style>
1
+ <template>
2
+ <div class="demo-container">
3
+ <h2>XFormItem Demo</h2>
4
+
5
+ <!-- 查询模式演示 -->
6
+ <div class="demo-section">
7
+ <h3>查询模式</h3>
8
+ <x-form-item
9
+ :attr="queryAttr"
10
+ :form="queryForm"
11
+ mode="查询"
12
+ :showLabel="true"
13
+ />
14
+ <div class="value-display">
15
+ 当前值: {{ queryForm.rate || '未选择' }}
16
+ </div>
17
+ </div>
18
+
19
+ <!-- 新增模式演示 -->
20
+ <div class="demo-section">
21
+ <h3>新增模式</h3>
22
+ <x-form-item
23
+ :attr="addAttr"
24
+ :form="addForm"
25
+ mode="新增/修改"
26
+ :showLabel="true"
27
+ />
28
+ <div class="value-display">
29
+ 当前值: {{ addForm.rate || '未评分' }}
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </template>
34
+
35
+ <script>
36
+ import XFormItem from './XFormItem.vue'
37
+
38
+ export default {
39
+ name: 'XFormItemDemo',
40
+ components: {
41
+ XFormItem
42
+ },
43
+ data () {
44
+ return {
45
+ // 查询表单配置
46
+ queryAttr: {
47
+ type: 'rate',
48
+ name: '评分查询',
49
+ queryType: 'IN',
50
+ model: 'rate',
51
+ placeholder: '请选择评分',
52
+ allowHalf: true,
53
+ maxCount: 5
54
+ },
55
+ queryForm: {
56
+ },
57
+
58
+ // 新增表单配置
59
+ addAttr: {
60
+ type: 'rate',
61
+ name: '评分',
62
+ model: 'rate',
63
+ allowHalf: true,
64
+ maxCount: 10
65
+ },
66
+ addForm: {
67
+ rate: 3
68
+ }
69
+ }
70
+ }
71
+ }
72
+ </script>
73
+
74
+ <style lang="less" scoped>
75
+ .demo-container {
76
+ padding: 20px;
77
+ max-width: 800px;
78
+ margin: 0 auto;
79
+ background-color: #f5f5f5;
80
+
81
+ h2 {
82
+ margin-bottom: 20px;
83
+ color: #1890ff;
84
+ }
85
+
86
+ .demo-section {
87
+ margin-bottom: 30px;
88
+ padding: 20px;
89
+ border: 1px solid #e8e8e8;
90
+ border-radius: 4px;
91
+
92
+ h3 {
93
+ margin-bottom: 16px;
94
+ color: #333;
95
+ }
96
+
97
+ .value-display {
98
+ margin-top: 16px;
99
+ padding: 8px;
100
+ background-color: #f5f5f5;
101
+ border-radius: 4px;
102
+ }
103
+ }
104
+ }
105
+ </style>
@@ -1,102 +1,102 @@
1
- <template>
2
- <div class="demo-container">
3
- <h2>XRate 评分组件示例</h2>
4
-
5
- <div class="demo-section">
6
- <h3>基础用法</h3>
7
- <x-rate v-model="basicRate" />
8
- <div>当前值: {{ basicRate }}</div>
9
- <a-button @click="resetBasicRate">重置</a-button>
10
- </div>
11
-
12
- <div class="demo-section">
13
- <h3>允许半星</h3>
14
- <x-rate v-model="halfRate" :allow-half="true" />
15
- <div>当前值: {{ halfRate }}</div>
16
- </div>
17
-
18
- <div class="demo-section">
19
- <h3>自定义最大分值</h3>
20
- <x-rate v-model="customRate" :max-count="10" />
21
- <div>当前值: {{ customRate }}</div>
22
- </div>
23
-
24
- <div class="demo-section">
25
- <h3>查询模式</h3>
26
- <x-rate v-model="queryRate" mode="查询" />
27
- <div>当前值: {{ queryRate }}</div>
28
- </div>
29
-
30
- <div class="demo-section">
31
- <h3>查询模式(多选)</h3>
32
- <x-rate v-model="queryMultiRate" mode="查询" query-type="IN" />
33
- <div>当前值: {{ queryMultiRate }}</div>
34
- </div>
35
-
36
- <div class="demo-section">
37
- <h3>禁用状态</h3>
38
- <x-rate v-model="disabledRate" :disabled="true" />
39
- <div>当前值: {{ disabledRate }}</div>
40
- </div>
41
-
42
- <div class="demo-section">
43
- <h3>空值处理</h3>
44
- <x-rate v-model="emptyRate" />
45
- <div>当前值: {{ emptyRate }}</div>
46
- <a-button @click="clearRate">清除</a-button>
47
- </div>
48
- </div>
49
- </template>
50
-
51
- <script>
52
- import XRate from './index.vue'
53
-
54
- export default {
55
- name: 'XRateDemo',
56
- components: {
57
- XRate
58
- },
59
- data () {
60
- return {
61
- basicRate: 3,
62
- halfRate: 3.5,
63
- customRate: 7,
64
- queryRate: 4,
65
- queryMultiRate: [3, 4],
66
- disabledRate: 2,
67
- emptyRate: undefined
68
- }
69
- },
70
- methods: {
71
- resetBasicRate () {
72
- this.basicRate = 3
73
- },
74
- clearRate () {
75
- this.emptyRate = undefined
76
- }
77
- }
78
- }
79
- </script>
80
-
81
- <style lang="less" scoped>
82
- .demo-container {
83
- padding: 20px;
84
-
85
- .demo-section {
86
- margin-bottom: 30px;
87
- padding: 20px;
88
- border: 1px solid #eee;
89
- border-radius: 4px;
90
-
91
- h3 {
92
- margin-top: 0;
93
- margin-bottom: 16px;
94
- color: #333;
95
- }
96
-
97
- .ant-btn {
98
- margin-top: 8px;
99
- }
100
- }
101
- }
102
- </style>
1
+ <template>
2
+ <div class="demo-container">
3
+ <h2>XRate 评分组件示例</h2>
4
+
5
+ <div class="demo-section">
6
+ <h3>基础用法</h3>
7
+ <x-rate v-model="basicRate" />
8
+ <div>当前值: {{ basicRate }}</div>
9
+ <a-button @click="resetBasicRate">重置</a-button>
10
+ </div>
11
+
12
+ <div class="demo-section">
13
+ <h3>允许半星</h3>
14
+ <x-rate v-model="halfRate" :allow-half="true" />
15
+ <div>当前值: {{ halfRate }}</div>
16
+ </div>
17
+
18
+ <div class="demo-section">
19
+ <h3>自定义最大分值</h3>
20
+ <x-rate v-model="customRate" :max-count="10" />
21
+ <div>当前值: {{ customRate }}</div>
22
+ </div>
23
+
24
+ <div class="demo-section">
25
+ <h3>查询模式</h3>
26
+ <x-rate v-model="queryRate" mode="查询" />
27
+ <div>当前值: {{ queryRate }}</div>
28
+ </div>
29
+
30
+ <div class="demo-section">
31
+ <h3>查询模式(多选)</h3>
32
+ <x-rate v-model="queryMultiRate" mode="查询" query-type="IN" />
33
+ <div>当前值: {{ queryMultiRate }}</div>
34
+ </div>
35
+
36
+ <div class="demo-section">
37
+ <h3>禁用状态</h3>
38
+ <x-rate v-model="disabledRate" :disabled="true" />
39
+ <div>当前值: {{ disabledRate }}</div>
40
+ </div>
41
+
42
+ <div class="demo-section">
43
+ <h3>空值处理</h3>
44
+ <x-rate v-model="emptyRate" />
45
+ <div>当前值: {{ emptyRate }}</div>
46
+ <a-button @click="clearRate">清除</a-button>
47
+ </div>
48
+ </div>
49
+ </template>
50
+
51
+ <script>
52
+ import XRate from './index.vue'
53
+
54
+ export default {
55
+ name: 'XRateDemo',
56
+ components: {
57
+ XRate
58
+ },
59
+ data () {
60
+ return {
61
+ basicRate: 3,
62
+ halfRate: 3.5,
63
+ customRate: 7,
64
+ queryRate: 4,
65
+ queryMultiRate: [3, 4],
66
+ disabledRate: 2,
67
+ emptyRate: undefined
68
+ }
69
+ },
70
+ methods: {
71
+ resetBasicRate () {
72
+ this.basicRate = 3
73
+ },
74
+ clearRate () {
75
+ this.emptyRate = undefined
76
+ }
77
+ }
78
+ }
79
+ </script>
80
+
81
+ <style lang="less" scoped>
82
+ .demo-container {
83
+ padding: 20px;
84
+
85
+ .demo-section {
86
+ margin-bottom: 30px;
87
+ padding: 20px;
88
+ border: 1px solid #eee;
89
+ border-radius: 4px;
90
+
91
+ h3 {
92
+ margin-top: 0;
93
+ margin-bottom: 16px;
94
+ color: #333;
95
+ }
96
+
97
+ .ant-btn {
98
+ margin-top: 8px;
99
+ }
100
+ }
101
+ }
102
+ </style>