ijijin-view(Vue)

二次开发

样式修改

ijijin-view的样式由基础级样式（ijijin_builder/stylebuild）、模块化样式（ijijin_builder/stylebuild）、全局组件样式（ijijin-view/vue/less）、部分组件样式（ijijin-view/vue/less）组成，默认引入基础级样式、模块化样式及全局组件样式，可通过引ijijin-view/vue/index.nostyle.js避免基础样式、模块化样式及全局组件样式的引入而自定义样式。

组件样式修改

组件css样式均通过class设置，格式为vu-组件名称，各组件根class如下

  • Alert弹窗: vu-alert；
  • Button按钮：vu-btn；
  • Toast通知：vu-toast；
  • Icon图标：vu-iconfont；
  • TabHead标签页头：vu-tab-head；
  • TabBody标签页容器：vu-tab-body；
  • TabBodyItem标签页：vu-tab-body-item；
  • Slider轮播图容器：vu-slider；
  • SliderItem轮播图项：vu-silder-item；
  • HorseRaceLamp滚动通知：vu-horse-race-lamp；
  • Input输入框：vu-input；
  • Picker选择器：vu-picker；
  • PickerGroup联动选择器：vu-picker-group；
  • PullRefresh下拉刷新：vu-pull-refresh；
  • PullRefresh上拉窗口：vu-pull-window；

引用

模块样式修改（不推荐）

模块类名命名规则（可见ijijin_builder/stylebuild），熟悉模块样式可提高样式开发效率。

  • 功能(.f-) 常用样式的使用，通常这些选择器具有固定样式表现，比如清除浮动等；
  • 元件(.u-) 组件，不涉及到外部布局，比如按钮、icon等；
  • 模块(.m-) 一个语义化的较大的整体，通常与业务相关，比如导航、登录、列表等；
  • 布局(.g-) 外部布局相关样式的整体，比如相对定位；
  • 状态(.z-) 不同状态展示不同形态；
  • 动画(.a-) 动画类；
  • JS操作(.j-) 涉及到JS操作的节点，通常做样式处理。

如下列stylebuild中部分样式

    .f-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
    }

    .u-w10{
        width: 0.133rem;
    }

    .m-win_bg{
        position: fixed;
        z-index: 18;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .g-box_b{
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    .z-hide {
        display: none !important;
    }

    .a-fade {
        -webkit-animation: fade 1s 1 ease;
                animation: fade 1s 1 ease;
    }

*ijijin-view中包含!important样式：z-disabled(Button)、f-cr_red、f-cr_green、f-cr_blue、f-ft_base、f-ft_base2、f-ft_sub、f-ft_sub_、z-hide。z-index层级最高级：19。

组件混合、拓展

ijijin-view中的所有组件可通过引入进行二次封装。

如下结合Mask、Picker进一步开发封装选择器（效果可见"表单组件"右侧效果页"底部选择器"模块）

    <template>
        <transition name="vu-trans-win">
            <section class="vu-bottom-picker" v-if="show">
                <div class="vu-bottom-picker-content">
                    <div class="vu-bottom-picker-content-operate u-p10">
                        <v-button type="white" @click="close">取消</v-button>
                        <v-button type="white" class="f-cr_blue" @click="ensure">确认</v-button>
                    </div>
                    <picker :data="data" v-model="value"></picker>
                </div>
            </section>
        </transition>
    </template>

    <script>
        import Mask from 'ijijin-view/vue/Mask'
        import Picker from 'ijijin-view/vue/Picker'

        export default {
            name: "BottomPicker",
            mixins: [Mask],
            props: {
                data: {
                    type: Array,
                    required: true
                },
                show: Boolean,
                index: {
                    type: Number,
                    default: 0
                }
            },
            data() {
                return {
                    value: this.index
                }
            },
            components: {
                Picker
            },
            methods: {
                close() {
                    this.$emit('close')
                },
                ensure() {
                    this.$emit('ensure', this.value)
                }
            }
        }
    </script>

    <style lang="less">
        .vu-bottom-picker {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 19;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }
        .vu-bottom-picker-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding-bottom: 20px;
            background-color: #fff;
            .vu-bottom-picker-content-operate {
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                -webkit-justify-content: space-between;
            }
        }

        .vu-trans-win-enter, .vu-trans-win-leave-active {
            -webkit-transform: translate3d(0, 12rem, 0) !important;
                    transform: translate3d(0, 12rem, 0) !important;
        }
    </style>

调用方式

<template>
    <section>
        <bottom-picker :show="show" :data="pickerData" :index="value" @leftClick="close" @rightClick="ensure">  </bottom-picker>
    </section>
</template>

<script>
    import BottomPicker from '@/components/BottomPicker'

    export default {
        name: "BottomPickers",
        data() {
            return {
                pickerData: ['A', 'B', 'C', 'D', 'E', 'F'],
                show: true,
                value: 0
            }
        },
        components: {
            BottomPicker
        },
        methods: {
            close() {
                this.show = false
            },
            ensure(data) { // 返回选择的值
                this.value = data;
         
            },
            showPicker(){
                this.show = true;
            }
        }
    }
</script>

2.API

参数 类型 默认值 说明
index Number 0 初始化默认选择项
data Array 必填 选择器数据
show Boolean 必填 控制显示隐藏
rightText String ‘确定’ 右边按钮显示文案
leftText String ‘取消’ 左边按钮显示文案

3.Event

参数 说明
leftClick 点击右边按钮触发
rightClick 点击左边确认触发

← 关于 →