sr-element-master v0.0.10

sr-element-master

基于element ui 进行二次封装开发，采用按需加载的模式在需要进行二次封装的对应名称组件内引入需要重新封装的element组件

组件二次封装考虑事项：
1、继承原有element组件属性及事件。
2、继承原有element插槽（默认插槽、具名插槽、作用域插槽）。
3、原element组件ref实例转发（注意原组件挂载的实例方法是否可用）。
4、原element基础组件存在被其它组件引用的情况，注意二次封装的组件被其它组件引用后功能样式是否正常。
5、覆盖组件样式的类名为全局作用样式，为后续便于维护，且需要满足按需加载要求，不可在<style lang="scss" scoped></style>或者<style lang="scss"></style>标签内写样式，
需在theme-chalk文件夹内的custom文件夹新建覆盖组件对应名称的scss样式文件，为满足后续换肤等各项需求，涉及色系等公共属性需创建在common文件夹的custom-var文件创建对应的色系变量，
供全局调用。

目录结构说明：
lib          ---已编译组件文件夹
packages     ---二次封装组件文件夹
    button          ---二次封装组件示例el-button组件
    input           ---二次封装组件示例el-input组件
    theme-chalk     ---组件样式文件夹
               lib     ---已编译element css样式文件
               src     ---element scss样式文件
                  custom     ---自定义覆盖scss样式文件   
                  common     ---公共配置文件夹
                        custom-var     ---切换色系变量配置自定义文件
                        

备注：后续组件开发规范及更新流程待完善补充

项目依赖安装

yarn install

项目开发环境启动

babel.config.js文件配置（实时预览组件效果）
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "~packages/theme-chalk/src", //按需加载自定义样式路径
            "ext": ".scss"
          }
        ]
    ]
}

yarn serve

theme-chalk文件夹样式编译

yarn build:theme

注意：在执行组件编译指令yarn lib打包前，需先进行样式编译指令yarn build:theme将scss样式编译为css样式

packages文件夹封装组件打包

yarn lib

packages文件夹封装组件实时调试预览

Home.vue

<template>
    <div>
        <div style="padding-top: 20px;">二次封装组件</div>
        <div class="flex-row custom-row">
            <sr-input
                ref="srinput"
                v-model="inputValue"
                placeholder="请输入内容">
                <!-- 使用继承的作用域插槽 -->
                <template v-slot:prepend="{ value, emitInput }">
                    <button @click="decrement(value, emitInput)">-</button>
                </template>
                <template v-slot:append="{ value, emitInput }">
                    <button @click="increment(value, emitInput)">+</button>
                </template>
                <!-- 非作用域插槽 -->
                <i
                    slot="suffix"
                    class="el-input__icon el-icon-search" />
                <i
                    slot="prefix"
                    class="el-icon-edit el-input__icon" />
            </sr-input>
        </div>
        <div class="flex-row custom-row">
            <sr-button>默认按钮</sr-button>
            <sr-button type="primary">主要按钮</sr-button>
            <sr-button type="success">成功按钮</sr-button>
            <sr-button type="info">信息按钮</sr-button>
            <sr-button type="warning">警告按钮</sr-button>
            <sr-button type="danger">危险按钮</sr-button>
            <sr-button type="primary" icon="el-icon-edit" circle></sr-button>
            <sr-button type="text">文字按钮</sr-button>
        </div>
    </div>
</template>

<script>
import SrInput from 'packages/input/src/index'
import SrButton from 'packages/button/src/index'
export default {
    name: 'HomeView',
    components: {
        SrInput,
        SrButton
    },
    data() {
        return {
            inputValue: ''
        };
    },
    created() {
    },
    mounted(){
        // console.log(this.$refs.srinput)
        // 测试element原生事件 - 默认光标选中
        // this.$refs.srinput.focus()
    },
    methods: {
        theme(type) {
            window.document.documentElement.setAttribute( "data-theme", type );
        },
        increment(value, emitInput) {
            if(!value) value =0
            console.log(value)
            const _val = value + 1
            emitInput(_val);
        },
        decrement(value, emitInput) {
            const _val = value - 1
            emitInput(_val);
        }
    }
};
</script>

<style lang="scss" scoped>
    .row{
        // background-color: getThemeAttr('background-color');
        // background-color: background_color4;
        // @include background_color("background_color1");
        color: black;
    }
    .flex-row{
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: center;
    }
    .custom-row{
        padding: 10px;
    }
    
</style>

npm发布流程

npm login（npm登录）
输入用户名称
输入用户密码
输入验证邮箱
输入邮箱动态验证码
npm publish（npm发布）
发布前需确认发布名称唯一性，每次发布需更新版本号
验证发布流程可自行修改发布名称上传发布即可

Customize configuration

See Configuration Reference.