UI -- Vue2

Vue2 模板

Vue2 UI

• package.json同级
• components/slButton/element.vue

<template>
	<div class="d1">
		<span>测试123</span>
	</div>
</template>

<script>
	export default {
   
		name:"sl-button",
		data() {
   
			return {
   
				
			};
		}
	}
</script>
// 不使用scss
<style scoped>
.d1 span{
   
    color:red;
}
</style>

• components/slButton/index.js

import sl from "./element";
sl.install = function (Vue) {
   
    Vue.component(sl.name, sl);
};
export default sl;

• components/function.js

export const ceshi = ()=>{
   
    console.log('123')
}

• components/index.js

import slButton from "./slButton";
import {
   ceshi} from  './function'

const components = [slButton];

const install = function (Vue) {
   
    if (install.installed) return;
    components.map((component) => Vue.component(component.name, component));

    Vue.prototype.$ceshi = ceshi;
};

if (typeof window !== 'undefined' && window.Vue) {
   
    install(window.Vue);
}
export default {
   
    install,
    slButton
};

export {
    slButton };

使用

• main.js

import SL from '../components/index'
// 打包使用需要引入css
Vue.use(SL);


<sl-button></sl-button>

this.$ceshi()

UI 文档

• src 同级创建
• docs 文件夹

npm init -y     
npm i vuepress -D
npm i highlight.js -D

• docs/package.json

"scripts": {
   
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }

• docs 下创建 docs , docs/docs目录结构
  • .vuepress
    • components
      • slButton.vue
    • config.js
    • enhanceApp.js
    • index.css
    • mixin.js
  • components
    • sl-button.md
  • get-started
    • README.md
  • guide
    • README.md
  • install
    • README.md
  • README.md

docs

.vuepress

• components/slButton.vue

<template>
  <div class="demo">
    <h2>创建组件文档模板</h2>
    <p>组件描述</p>
    <h3>组件功能名字</h3>
    <p>组件功能描述</p>
    <div class="component-wrapper">
      <div class="component-wrapper-demo">
        组件展示位置
      </div>

      <div class="code-content" v-highlight style="height: 0;">
        <div class="code-content-height">
          <pre><code class="html">{
   {
   codeStr}}</code></pre>
        </div>
      </div>

      <div class="lock-code" @click="showCode(0)" ref="xxx">
        <span class="icon-down" v-text="isShow[0] === false ? 'down' : 'up'"></span>
        <span class="lock-code-word">{
   {
   isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
      </div>
    </div>


    <h3>attributes</h3>
    <p>组件参数说明后期扩展</p>
  </div>
</template>

<script>
import mixin from '../mixin'
export default {
   
  name: 'demo',
  mixins: [mixin],
  data() {
   
    return {
   
      codeStr: `
          <sl-button></sl-button>
        `.replace(/^\s*/gm, '').trim(),
    }
  }
}
</script>

<style>

</style>

• config.js

const path = require('path')
module.exports = {
   
    base: '/slUI/',
    title: '❤ Sl UI',
    description: '一套为开发者学习准备的基于 Vue 2.0 组件库',
    head: [
        ['link', {
   rel: 'icon', href: '/img/s.png', type: 'image/png'}] // 可去掉
    ],
    themeConfig: {
   
        repo: true,// 默认是 false, 设置为 true 来启用
        lastUpdated: 'Sun',
        // editLinks: true,
        nav: [
            {
   text: '主页', link: '/'},
            {
   text: '指南', link: '/guide/'},
            {
   text: '交流', link: 'https://gitee.com/sunlei0718'},
        ],
        sidebarDepth: 2,
        sidebar: [
            {
   
                title: '入门',
                collapsable: false,
                children: [
                    '/guide/',
                    '/install/',
                    '/get-started/',
                ]
            },
            {
   
                title: '组件',
                collapsable: false,
                children: [
                    '/components/sl-button',
                ]
            },
        ]
    },
    markdown: {
   
        lineNumbers: true
    }
}

• enhanceApp.js

import './index.css'
import sl from '../../../lib/uu.common'
import  '../../../lib/uu.css' // 引入打包之后的需要css
//代码高亮文件引入
import Vue from 'vue'
import hljs from 'highlight.js'
//样式文件,这里我选的是sublime样式，文件里面还有其他样式可供选择
import 'highlight.js/styles/color-brewer.css'
Vue.directive('highlight',function (el) {
   
  let blocks = el.querySelectorAll('pre code');
      blocks.forEach((block)=>{
   
      hljs.highlightBlock(block)
  })
})
export default ({
   
                  Vue, // VuePress 正在使用的 Vue 构造函数
                  // options, // 附加到根实例的一些选项
                  // router, // 当前应用的路由实例
                  // siteData // 站点元数据
                }) => {
   
    Vue.use(sl)
// ...做一些其他的应用级别的优化
}

• index.css

.theme-container.sidebar-open .sidebar {
   
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border: 0;
}
.sidebar, .navbar {
   
  z-index: 10000;
}

.component-wrapper .component-wrapper-demo {
   
  padding: 24px 24px 15px 24px;
}

.component-wrapper h4 {
   
  margin: 55px 0 20px;
}

.component-wrapper:hover {
   

  box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
}


.component-wrapper:hover >.lock-code .lock-code-word {
   
  font-size: 14px;
  transform: translateX(-40px);
  opacity: 1;
}

.component-wrapper:hover >.lock-code .icon-down {
   
  transform: translateX(-40px);
}


.component-wrapper {
   
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
}


  .component-wrapper .code-content {
   
    background-color: #fafafa;
    border-top: 1px solid #eaeefb;
    overflow: hidden;
    transition: height .2s;

  }


.component-wrapper .code-content .code-content-height .code-user-desc{
   
  background: #ffffff;
  margin: 10px 10px 0 10px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 26px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
}
.component-wrapper .code-content .code-content-height > pre {
   
  background: #f1bebe;
}
.component-wrapper .code-content .code-content-height > code {
   
  color: #3182bd;
}


  .component-wrapper .lock-code {
   
    border-top: 1px solid #eaeefb;
    height: 44px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    margin-top: -1px;
    color: #d3dce6;
    cursor: pointer;
    position: relative;
    line-height: 44px;
    color: #d3dce6;
    text-align: center;
  }




.component-wrapper .lock-code:hover {
   
  background-color: #f9fafc;

}

.component-wrapper .lock-code:hover>.lock-code-word {
   
  color: #409eff;
}

.component-wrapper .lock-code:hover>.icon-down {
   
  fill: #409eff;
}

.component-wrapper .lock-code .icon-down {
   
  transform: translateX(0px);
  transition: all .1s;
}


.component-wrapper .lock-code .lock-code-word {
   
  font-size: 0px;
  margin-left: 15px;
  display: inline-block;
  transition: all .1s;
  opacity: 0;
}


::-webkit-scrollbar {
   
  width: 8px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
   
  border-radius: 6px;
  background-color: #ccc;
}

::-webkit-scrollbar-track {
   
  border-radius: 6px;
  background-color: #f5f5f5;
}

• mixin.js

export default {
   
    data () {
   
        return {
   
            //每一个区域的高度
            codeParent: [],
            codeHeightArr: [],
            //每个区域的显示状态
            isShow: [],
        }
    },
    methods: {
   
        //根据子元素的高度 设置代码区域父元素的高度
        showCode (index) {
   
            this.$set(this.isShow, index, !this.isShow[index])
            this.$nextTick(() => {
   
                if (this.isShow[index] === true) {
   
                    this.codeParent[index].style.height = +this.codeHeightArr[index] + 25 + 'px'
                } else {
   
                    this.codeParent[index].style.height = 0
                }
            })
        },
        //得到所有代码区域的高度
        getCodesHeight () {
   
            const arr = document.getElementsByClassName('code-content-height')
            this.codeParent = document.getElementsByClassName('code-content')
            const arrLength = arr.length
            for (let i = 0; i < arrLength; i++) {
   
                this.codeHeightArr.push(arr[i].getBoundingClientRect().height)
                this.isShow.push(false)
            }
        },
    },
    mounted () {
   
        //异步获取当前组件内部 code区域的高度 以便于给点击的时候使用
        this.$nextTick(() => {
   
            this.getCodesHeight()
        })
    },
}

components

• sl-button.md

# Button 按钮
常用的操作按钮
## 基础用法
基础的按钮用法

<ClientOnly> 
<div>
  <sl-button></sl-button>
<slButton></slButton>
</div> 
</ClientOnly>

get-started

• README.md

---
title: 快速上手
---

## 安装

请参考 [安装](../install/) 章节


## 单个引入
 
## 全局引入
 

guide

• README.md

---
title: UI
---

# UI


👀 介绍

- 本 UI 框架是基于 Vue 2 实现的。

📌 项目特点

- UI

🔮 视觉稿

- UI

🚲 为什么叫   UI

- UI

install

• README.md
  • \ 需去掉

---
title: 安装
---

# 安装

推荐安装  xxx@版本

\```bash
npm install xxx@版本
\```
或
\```bash
yarn add xxx@版本
\```

README.md

---
home: true

actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简易好学
  details: 基于 VUE2
- title: Vue 驱动
  details: 享受 Vue 的开发体验，实践最流行的技术。
- title: s-ui
  details: s-ui
footer: Sun 2294073848@qq.com
---