vue ts 项目开发规范

原创
2020/09/30 14:51
阅读数 1K

项目平台 开发规范

1、页面

1.1 iviewui 组件

  • Form label-width="120"
 <Form inline :label-width="120" label-colon>
  • DatePicker
    • date 宽度 180px
    • daterange 宽度 250px
 <DatePicker type="date" style="width: 180px"></DatePicker>
 <DatePicker type="daterange" style="width: 250px" ></DatePicker>
  • Select 宽度 180px
<Select style="width: 180px"></Select>
  • Page 分页定位
<div class="margin-col-30">
    <Table :columns="columns" :data="list"></Table>
</div>
<div class="page">
    <Page :total="100" :page-size="25" show-total show-elevator></Page>
</div>

1.2 弹框

  • 弹框尽量拆成组件 导入到主界面

2 class层叠样式

  • margin 可替换数字:5 15 20 25 30
.margin-5 { margin: 5px; }
.margin-col-5 { margin: 5px 0; }
.margin-row-5 { margin: 0 5px; }
.margin-t-5 { margin-top: 5px; }
.margin-r-5 { margin-right: 5px; }
.margin-b-5 { margin-bottom: 5px; }
.margin-l-5 { margin-left: 5px; }

.margin-15 { margin: 15px; }
.margin-col-15 { margin: 15px 0; }
.margin-row-15 { margin: 0 15px; }
.margin-t-15 { margin-top: 15px; }
.margin-r-15 { margin-right: 15px; }
.margin-b-15 { margin-bottom: 15px; }
.margin-l-15 { margin-left: 15px; }
  • padding 可替换数字:5 15 20 25 30
.padding-5 { padding: 5px; }
.padding-col-5 { padding: 5px 0; }
.padding-row-5 { padding: 0 5px; }
.padding-t-5 { padding-top: 5px; }
.padding-r-5 { padding-right: 5px; }
.padding-b-5 { padding-bottom: 5px; }
.padding-l-5 { padding-left: 5px; }

.padding-15 { padding: 15px; }
.padding-col-15 { padding: 15px 0; }
.padding-row-15 { padding: 0 15px; }
.padding-t-15 { padding-top: 15px; }
.padding-r-15 { padding-right: 15px; }
.padding-b-15 { padding-bottom: 15px; }
.padding-l-15 { padding-left: 15px; }
  • .page
.page { text-align: right; margin: 30px 0; }
  • .md-table
<table class="md-table">
                <tr>
                    <th>客户编号:</th>
                    <td>6245375675457</td>
                    <th>客户编号:</th>
                    <td>6245375675457</td>
                </tr>
                <tr>
                    <th>客户编号:</th>
                    <td>6245375675457</td>
                    <th>客户编号:</th>
                    <td>6245375675457</td>
                </tr>
                <tr>
                    <th>统一社会信用编号:</th>
                    <td>6245375675457</td>
                    <th>客户编号:</th>
                    <td>6245375675457</td>
                </tr>
            </table>
/**
统一table 表格样式,用于数据展示
 */
.md-table {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: collapse;

    td {
        border: 1px solid #e8eaec;
        height: 40px;
        padding: 8px 15px;
        word-wrap: break-word;
    }

    th {
        width: 180px;
        padding: 0px 15px;
        background-color: #f8f8f9;
        color: #515a6e;
        text-align: right;
        border: 1px solid #e8eaec;
        font-weight: normal;
    }

    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

3 通用模板

  • 弹窗

弹窗文件

        <template>
            <Modal v-model="isShowModal" :title="title" width="1000" class="sortModal" footer-hide>
                <div>add-customer-info 新增客户注册申请单</div>
            </Modal>
        </template>
        
        <script lang="ts">
            import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
        
            @Component
            export default class AddCustomerInfo extends Vue {
        
                @Prop({type: Boolean, default: false}) value!: boolean;
        
                private loading = false;
                private isShowModal = this.value;
                private title = '新客户注册申请单';
        
                @Watch('value')
                openCompanyListModal() {
                    this.isShowModal = true;
                    this.loading = false;
                }
            }
        </script>
        
        <style scoped lang="less">
        
        </style>
        

调用文件

        <template>
            <div>
                <AddCustomerInfo v-model="isAddCustomerInfoModel"></AddCustomerInfo>
            </div>
        </template>
        
        <script lang="ts">
            import {Component, Vue} from 'vue-property-decorator';
            import AddCustomerInfo from './components/add-customer-info.vue';
        
            @Component({
                components: {AddCustomerInfo}
            })
            export default class CustomerAdd extends Vue {
                private isAddCustomerInfoModel = false;
                private openAddCustomerInfoModal() {
                    this.isAddCustomerInfoModel = !this.isAddCustomerInfoModel;
                }
            }
        </script>
        
        <style scoped lang="less">
        </style>
        
  • 表单操作栏 详情 编辑 删除按钮
  {
        key: 'index',
        title: '操作',
        width: 200,
        fixed: 'right',
        render: (h: any, params: any) => {
            const btnGroup = [];
    
             btnGroup.push(
                h('Button', {
                    class: ['margin-5'],
                    attrs: {
                        type: 'info',
                        ghost: true,
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // this.setCompanyInfo(params.row);
                        }
                    }
                }, '详情')
            );
    
            btnGroup.push(
                h('Button', {
                    class: ['margin-5'],
                    attrs: {
                        type: 'success',
                        ghost: true,
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // this.setCompanyInfo(params.row);
                        }
                    }
                }, '编辑')
            );
            btnGroup.push(
                h('Button', {
                    class: ['margin-5'],
                    attrs: {
                        type: 'error',
                        ghost: true,
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            this.$Modal.confirm({
                                content: '是否确认删除该?',
                                okText: '确认',
                                cancelText: '取消',
                                onOk: () => {
                                    // this.delCompanyInfoDataAction(params.row.companySixiId);
                                }
                            });
                        }
                    }
                }, '删除')
            );
            return h('div', {}, btnGroup);
        }
    }
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部