qiaopengfei #12

Merged
qiaopengfei merged 4 commits from qiaopengfei into master 2024-07-05 14:04:47 +08:00
4 changed files with 105 additions and 36 deletions
Showing only changes of commit 2012c02efe - Show all commits

View File

@ -2,13 +2,15 @@ import Vue from 'vue'
import App from '../src/App.vue'
//基于element组件封装引入element组件库
import { Input, Select, Option, OptionGroup, DatePicker } from 'element-ui';
import { Input, Select, Option, OptionGroup, DatePicker ,Tabs,TabPane} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Input);
Vue.use(Select);
Vue.use(OptionGroup);
Vue.use(Option);
Vue.use(DatePicker);
Vue.use(Tabs);
Vue.use(TabPane);
// 导入组件库
import erp_element_ui from '../packages'

View File

@ -3,7 +3,7 @@
class="ag-date-picker"
v-model="dateArr"
v-bind="attrs"
@change="dataChange"
v-on="inputListeners"
/>
</template>
@ -18,12 +18,12 @@ export default {
props: {
value: {
type: Array,
default: () => [],
default: () => [null, null],
},
},
data() {
return {
dateArr: ["", ""],
dateArr: [null, null],
};
},
computed: {
@ -103,6 +103,21 @@ export default {
...this.$attrs,
};
},
//
inputListeners() {
return Object.assign({}, this.$listeners, {
input: (value) => {
let date1 = "";
let date2 = "";
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
date1 = `${value[0]} 00:00:00`;
date2 = `${value[1]} 23:59:59`;
}
this.$emit("input", [date1, date2]);
},
});
},
},
watch: {
value: {
@ -123,18 +138,7 @@ export default {
deep: true,
},
},
methods: {
dataChange(val) {
let date1 = "";
let date2 = "";
if (!isEmpty(val) && val.length === 2 && val[0] && val[1]) {
date1 = `${val[0]} 00:00:00`;
date2 = `${val[1]} 23:59:59`;
}
this.$emit("input", [date1, date2]);
},
},
methods: {},
};
</script>

View File

@ -1,23 +1,43 @@
<template>
<el-tabs class="ag-tabs" v-on="$listeners" v-bind="attrs"> </el-tabs>
</template>
<el-tabs class="ag-tabs" v-bind="$attrs" v-on="$listeners">
<slot v-if="!tabsData.length" name="default" />
<el-tab-pane
v-else
v-for="(item, index) in tabsData"
:key="index"
:name="item.name"
:lazy="item.lazy || false"
:disabled="item.disabled || false"
:closable="item.closable || false"
>
<template #label>
<span>
{{ item.label }}
<i :class="item.icon"></i>
<span v-if="item.remark" class="remark">{{ item.remark }}</span>
</span>
</template>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name: "agTabs",
props: {
tabsData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {};
},
computed: {
attrs() {
return {
...this.$attrs,
};
},
},
computed: {},
methods: {},
};
</script>
<style scoped lang='scss'>
</script>
<style scoped lang="scss">
</style>

View File

@ -1,17 +1,22 @@
<template>
<div>
<agDatePicker ref="ref_Pedestal" v-model="value" @blur="changeInput" >
</agDatePicker>
<agTabs
ref="ref_Pedestal"
v-model="value"
:before-leave="handleClick"
:tabsData="tabsData"
>
</agTabs>
</div>
</template>
<script>
import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agTabs from "../packages/agTabs/src/index.vue";
export default {
components: { agDatePicker },
components: { agTabs },
data() {
return {
value: [],
value: "",
options: [
{
label: "热门城市",
@ -79,6 +84,44 @@ export default {
},
],
},
tabsData: [
{
label: "全部",
icon: "el-icon-phone",
disabled: true,
remark: "99",
name: "0",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "100",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "2",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "3",
total: 0,
},
{
label: "全部",
icon: "el-icon-phone",
remark: "99",
name: "4",
total: 0,
},
],
// options: [
// {
// value: "1",
@ -104,8 +147,8 @@ export default {
};
},
methods: {
changeInput() {
// console.log(this.value);
handleClick() {
console.log(1111);
},
},
};