You need to sign in or sign up before continuing.
hookehuyr

✨ feat: 新增分割线组件

1 +<!--
2 + * @Date: 2022-08-29 14:31:20
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-11-22 14:23:49
5 + * @FilePath: /data-table/src/components/DividerField/index.vue
6 + * @Description: 分隔线组件
7 +-->
8 +<template>
9 + <div class="divider-field-page">
10 + <van-divider :style="styleObj">
11 + {{ item.component_props.content }}
12 + </van-divider>
13 + </div>
14 +</template>
15 +
16 +<script setup>
17 +const props = defineProps({
18 + item: Object,
19 +});
20 +
21 +const styleObj = ref({});
22 +onMounted(() => {
23 + styleObj.value = {
24 + color: props.item.component_props.color,
25 + borderColor: props.item.component_props.color,
26 + padding: props.item.component_props.padding,
27 + };
28 +});
29 +</script>
30 +
31 +<style lang="less" scoped>
32 +.divider-field-page {
33 +}
34 +</style>
...@@ -18,6 +18,7 @@ import CalendarField from '@/components/CalendarField/index.vue' ...@@ -18,6 +18,7 @@ import CalendarField from '@/components/CalendarField/index.vue'
18 import IdentityField from '@/components/IdentityField/index.vue' 18 import IdentityField from '@/components/IdentityField/index.vue'
19 import NumberField from '@/components/NumberField/index.vue' 19 import NumberField from '@/components/NumberField/index.vue'
20 import DesField from '@/components/DesField/index.vue' 20 import DesField from '@/components/DesField/index.vue'
21 +import DividerField from '@/components/DividerField/index.vue'
21 22
22 /** 23 /**
23 * 生成自定义组件类型 24 * 生成自定义组件类型
...@@ -114,5 +115,9 @@ export function createComponentType(data) { ...@@ -114,5 +115,9 @@ export function createComponentType(data) {
114 item.name = item.key; 115 item.name = item.key;
115 item.component = DesField; 116 item.component = DesField;
116 } 117 }
118 + if (item.component_props.name === 'divider') {
119 + item.name = item.key;
120 + item.component = DividerField;
121 + }
117 }) 122 })
118 } 123 }
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2022-05-31 12:06:19 3 * @Date: 2022-05-31 12:06:19
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2022-09-14 11:05:31 5 + * @LastEditTime: 2022-11-22 14:12:00
6 * @FilePath: /data-table/src/main.js 6 * @FilePath: /data-table/src/main.js
7 * @Description: 7 * @Description:
8 */ 8 */
9 import { createApp } from 'vue'; 9 import { createApp } from 'vue';
10 -import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar } from 'vant'; 10 +import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area, DatePicker, TimePicker, PickerGroup, Rate, Calendar, Divider } from 'vant';
11 import router from './router'; 11 import router from './router';
12 import App from './App.vue'; 12 import App from './App.vue';
13 // import axios from './utils/axios'; 13 // import axios from './utils/axios';
...@@ -25,6 +25,6 @@ app.config.warnHandler = () => null; ...@@ -25,6 +25,6 @@ app.config.warnHandler = () => null;
25 25
26 app.config.globalProperties.$http = axios; // 关键语句 26 app.config.globalProperties.$http = axios; // 关键语句
27 27
28 -app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar); 28 +app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area).use(DatePicker).use(TimePicker).use(PickerGroup).use(Rate).use(Calendar).use(Divider);
29 app.use(vueEsign) 29 app.use(vueEsign)
30 app.mount('#app'); 30 app.mount('#app');
......