合格前端系列第八弹-造一个属于自己的 UI 库

最新推荐文章于 2022-08-07 11:14:54 发布
最新推荐文章于 2022-08-07 11:14:54 发布
阅读量210 收藏
点赞数
文章标签： 前端 ui javascript ViewUI
原文链接：https://my.oschina.net/qiangdada/blog/1590089
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、项目介绍

230619_OSTG_2912341.png

vui : 一个私人的vue ui 组件库（移动端为主）

文档官网

已有组件

二、安装下载

npm install x-vui -S

三、快速开始

3.1 构建项目（配合vue-cli）

# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-vui-project
# 安装依赖，并下载x-vui
cd my-vui-project
npm install && npm install x-vui
# 项目启动 默认端口localhost:8080
npm run dev

3.2 引入vui组件库

你可以引入整个 vui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vui。

3.2.1 完整引入

在main.js中写入

import Vue from 'vue'
import vui from 'x-vui'
import 'x-vui/lib/vui-css/index.css';

Vue.use(vui)

3.2.2 按需部分引入

在main.js中写入（假如我只需要Scroller和Select组件）

import Vue from 'vue'
import {
  Scroller,
  Select
  // ...
} from 'x-vui'
import 'x-vui/lib/vui-css/scroller.css';
import 'x-vui/lib/vui-css/select.css';

Vue.component(Scroller.name, Scroller)
Vue.component(Select.name, Select)

3.2.3 全局注册vui插件

注：完整引入了vui，则无需再注册插件

import Vue from 'vue';
import { 
  $Toast, 
  $Dialog 
  // ...
} from 'x-vui';

Vue.prototype.$toast = $Toast
Vue.prototype.$dialog = $Dialog


四、组件用法

4.1 swiper

可以自己调配自己想要的swiper，不一定得是轮播图

4.1.1 Attributes

参数说明类型可选值默认值
typeswiper类型stringswiper(正常)/thum(缩略)swiper
auto自动播放时长number—5000
itemsswiper展示的列表array—[]
showIndicators是否展示swiper小圆点boolean—true
stylesswiper样式控制object—{}
resetTitle重置title内容string——

4.1.2 Events

事件名称说明回调参数
changeswiper滑动回调当前swiper item索引

4.1.3 用法

<template>
  <div class="swiper-page">
    <p>正常swiper</p>
    <x-swiper type='swiper' :items='items' :styles="{height: '180px'}"></x-swiper>
    <p>缩略swiper</p>
    <x-swiper type='swiper' :items='items' :type="'thum'" :styles="{height: '208px'}"></x-swiper>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        require('assets/beauty_1.png'),
        require('assets/beauty_2.png'),
        require('assets/beauty_3.png'),
        require('assets/beauty_4.png'),
        require('assets/beauty_5.png')
      ],
    }
  }
}
</script>

<style lang="stylus" scoped>
.swiper-page {
  height auto
}
</style>

4.2 scroller（下拉刷新上拉加载）

4.2.1 Attributes

参数说明类型可选值默认值
onRefresh下拉回调function——
onInfinite上拉回调function——
widthscroller宽度string—100%
heightscroller高度string—100%
isLoadMore是否展示上拉加载boolean—true
refreshText下拉文本内容string—下拉刷新
noDataText无数据文本string—没有更多数据啦~
refreshLayerColor下拉文本颜色string—#AAA
loadingLayerColor上拉文本颜色string—#AAA
animating是否有动画boolean—true
animationDuration动画间隔number—250
bouncing是否有反弹效果string—true
cssClasscontent css classstring——

4.2.2 用法

<style scoped>
.scroller-page {
  height: 330px
}
ul {
  padding: 20px 0
}
li {
  width: 100%;
  height: 35px;
  line-height: 35px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
</style>

<template>
  <div class="scroller-page">
    <x-scroller
      :on-refresh="refresh"
      :on-infinite="infinite"
      :noDataText="noDataText"
    >
      <!-- content is here -->
      <ul>
        <li>数据1</li>
        <li>数据2</li>
        <li>数据3</li>
        <li>数据4</li>
        <li>数据5</li>
        <li>数据6</li>
      </ul>
    </x-scroller>
  </div>
</template>

<script>
export default {
  data () {
    return {
      noDataText: '没有更多数据啦~'
    }
  },
  methods: {
    refresh (done) {
      setTimeout(done, 1000)
      this.noDataText = ''
      console.log('refresh');
    },
    infinite (done) {
      setTimeout(done, 1000, true)
      this.noDataText = '没有更多数据啦~'
      console.log('infinite');
    }
  }
}
</script>

4.3 search

4.3.1 Attributes

参数说明类型可选值默认值
async是否进行节流boolean—true
timeout搜索节流时长number—100
stylessearch样式object——
placeholderplaceholderstring—'搜索'
autofocus是否自动聚焦(iOS端autofocus无效)boolean——
clear进行搜索是否清空search框内容boolean—false

4.3.2 Events

事件名称说明回调参数
searchsearch搜索回调搜索文本
enterenter时搜索回调搜索文本
close点击搜索关闭按钮回调''

4.3.3 用法

只有搜索框

<style lang="stylus">
.search-page {
  padding: 0 10px;
  margin-top: 10px;
}
</style>
<template>
  <div>
    <x-search
      placeholder="请输入搜索关键字"
      @search="searchFn"
      @enter="searchEnter"
      @close="closeFn"
    ></x-search>
  </div>
</template>

<script>
export default {
  methods: {
    searchFn (query) {
      console.log('search', query)
    },
    searchEnter (query) {
      console.log('enter', query)
    },
    closeFn (query) {
      console.log('close', query)
    }
  }
}
</script>

拥有默认的搜索结果列表

<style lang="stylus">
.search-page {
  padding: 0 10px;
  margin-top: 10px;
}
</style>
<template>
  <div class="search-page" v-title data-title="search">
    <x-search
      placeholder="请输入搜索关键字"
      :autofocus="true"
      :async="false"
      @search="searchFn"
      @enter="searchEnter"
      @close="closeFn"
    >
      <x-search-list :result="filterResult" @listSearch="listSearch" v-show="visible"></x-search-list>
    </x-search>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: '',
      visible: false, // 点击列表，列表是否消失
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ]
    }
  },
  watch: {
    keyword (val) {
      if (!val) {
        this.visible = false;
      }
    }
  },
  methods: {
    searchFn (query) {
      this.keyword = query;
      this.visible = true;
      console.log('search', query)
    },
    searchEnter (query) {
      this.keyword = query;
      console.log('enter', query)
    },
    closeFn (query) {
      this.keyword = query;
      console.log('close', query)
    },
    listSearch (index) {
      this.visible = false;
      console.log(index, this.defaultResult[index])
    }
  },
  computed: {
    filterResult() {
      return this.defaultResult.filter(item => new RegExp(this.keyword, 'i').test(item));
    }
  }
}
</script>

定制化结果列表，关键字高亮匹配

<style lang="stylus">
.search-page {
  padding: 0 10px;
  margin-top: 10px;

  .search-result {
    position: relative;
    overflow: hidden;
    .l {
      width: 100%;
      margin-bottom: 5px;
    }
    .r {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10px;
      line-height: 20px;
    }
    .price {
      color: #ff6f5c;
    }
    .gray {
      font-size: 12px;
    }
  }
}
</style>
<template>
  <div class="search-page" v-title data-title="search">
    <x-search
      placeholder="请输入搜索关键字"
      :autofocus="true"
      :async="false"
      @search="searchFn"
      @enter="searchEnter"
      @close="closeFn"
    >
      <x-search-list :result="filterResult" @listSearch="listSearch" v-show="visible">
        <div class="search-result" slot="list-item" slot-scope="props">
          <p class="l" v-html="props.slotValue.name"></p>
          <p class="gray" v-show="props.slotValue.price">￥{{props.slotValue.price}}/斤</p>
          <div class="gray r" v-show="props.slotValue.amount">剩余{{props.slotValue.amount}}斤</div>
        </div>
      </x-search-list>
    </x-search>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: '',
      visible: false,
      defaultResult: [
        {name: 'Apple', price: 5, amount: 20},
        {name: 'Banana', price: 5, amount: 30},
        {name: 'Orange', price: 3, amount: 10},
        {name: 'Durian', price: 10, amount: 25},
        {name: 'Lemon', price: 4, amount: 30},
        {name: 'Peach', price: 5, amount: 40},
        {name: 'Cherry', price: 20, amount: 50},
        {name: 'Berry', price: 15, amount: 60},
        {name: 'Core', price: 10, amount: 21},
        {name: 'Fig', price: 10, amount: 22},
        {name: 'Haw', price: 10, amount: 23},
        {name: 'Melon', price: 10, amount: 24},
        {name: 'Plum', price: 10, amount: 25},
        {name: 'Pear', price: 10, amount: 26},
        {name: 'Peanut', price: 10, amount: 27},
        {name: 'Other'}
      ],
      // 防止defaultResult值被污染
      copy: []
    }
  },
  watch: {
    keyword (val) {
      if (!val) {
        this.visible = false;
      }
    }
  },
  methods: {
    searchFn (query) {
      this.keyword = query;
      this.visible = true;
      console.log('search', query)
    },
    searchEnter (query) {
      this.keyword = query;
      console.log('enter', query)
    },
    closeFn (query) {
      this.keyword = query;
      console.log('close', query)
    },
    listSearch (index) {
      this.visible = false;
      console.log(index, this.defaultResult[index].name)
    }
  },
  computed: {
    filterResult() {
      // i 忽略大小写
      let result = this.defaultResult.filter(item => new RegExp(this.keyword, 'i').test(item.name));
      // 关键字高亮匹配
      this.copy = JSON.parse(JSON.stringify(result))
      this.copy.forEach((item, index) => {
        let name = item.name, word = this.keyword;
        name = name.toLowerCase();
        word = word.toLowerCase();

        if (word && name.indexOf(word) !== -1) {
          let arr    = item.name.split('')
          let i      = name.indexOf(word);
          let len    = word.length;
          let active = '<span class="price">' + arr.splice(i, len).join('') + '</span>';
          arr.splice(i, 0, active);
          item.name  = arr.join('');
        }
      })
      return this.copy;
    }
  }
}
</script>

4.4 dialog

4.4.1 Attributes

message
参数说明类型可选值默认值
msgmsg文本内容string——
timeoutmsg显示时长number—2000
callback回调函数function——
icon特殊iconstring——
modal
参数说明类型可选值默认值
showmodal是否显示boolean——
titlemodal标题string——
contentmodal内容string——
onOk确定按钮回调function——
onCancel取消按钮回调function——
okText确定按钮内容string——
cancelText取消按钮内容string——
showCloseIcon是否显示关闭iconboolean—true

4.4.2 用法

msg
this.$dialog.msg({msg: 'hello message components ~'})
modal(插件)
this.$dialog.modal({
  title: 'Demo Modal',
  cancelText: '取消',
  okText: '确定',
  content: '测试，测试，测试，测试，测试，测试，测试，测试，测试',
  onOk () {
    console.log('click ok btn to do someting');
  },
  onCancel () {
    console.log('click cancel btn to do someting');
  }
})
modal(组件)
<style lang="stylus">
.dialog-page {
  .dialog-btn {
    width 100%
    position absolute
    top 50%
    left 0
    transform translateY(-50%)
    > p {
      width 80%
      height 50px
      line-height 50px
      margin 40px auto 0
      border 1px solid #CCC
      border-radius 10px
      font-size 16px
      font-weight bold
      letter-spacing 2px
      text-align center
      &:first-child {
        margin-top 0
      }
    }
  }
  .modal-text {
    text-align: center;
  }
}
</style>
<template>
  <div class="dialog-page">
    <div class="dialog-btn">
      <p @click="message">message dialog</p>
      <p @click="open">modal dialog</p>
    </div>
    <x-modal title="Demo Modal" cancelText="取消" :onCancel="close" :show="selectModel" okText="确认" :onOk="close">
      <p class="modal-text">modal components test is awesome!!!</p>  
    </x-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectModel: false
    }
  },
  methods: {
    message () {
      return this.$dialog.msg({msg: 'this is a message dialog'})
    },
    open () {
      this.selectModel = true
    },
    close () {
      this.selectModel = false
    }
  }
}
</script>

4.5 table

4.5.1 Attributes

参数说明类型可选值默认值
tableDatatable数据array——
labelthead标题（TableColum）—— 
prop绑定的数据string——

4.5.2 用法

配合scroller进行展示（注：目前table较为简单，后期将进行完善，使得其可以应对不同场景）

<template>
  <div class="table" v-title data-title="table">
    <x-scroller
      :on-refresh="refresh"
      :on-infinite="infinite"
      :noDataText="noDataText"
      class="table-content"
    >
      <x-table :tableData="items">
        <x-table-column prop="list_1" label="LIST ONE"></x-table-column>
        <x-table-column prop="list_2" label="LIST TWO"></x-table-column>
        <x-table-column prop="list_3" label="LIST THREE"></x-table-column>
        <x-table-column prop="list_4" label="LIST FOUR"></x-table-column>
      </x-table>
    </x-scroller>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          list_1: '2017.12.09',
          list_2: '路人1',
          list_3: '爱过',
          list_4: '有'
        },
        {
          list_1: '2017.12.10',
          list_2: '路人2',
          list_3: '爱过',
          list_4: '有'
        },
        {
          list_1: '2017.12.11',
          list_2: '路人3',
          list_3: '爱过',
          list_4: '没有'
        },
        {
          list_1: '2017.12.12',
          list_2: '路人4',
          list_3: '爱过',
          list_4: '没有'
        }
      ],
      noDataText: '没有更多数据啦~'
    }
  },
  methods: {
    refresh (done) {
      setTimeout(done, 1000)
      this.noDataText = ''
      console.log('refresh');
    },
    infinite (done) {
      setTimeout(done, 1000, true)
      this.noDataText = '没有更多数据啦~'
      console.log('infinite');
    }
  }
}
</script>

4.6 picker

4.6.1 Attributes

参数说明类型可选值默认值
defaultpicker默认选中的值string/number——
typepicker类型stringdate/time/datetime/customdatetime
title选择器弹窗标题string——
placeholderplaceholderstring—请选择时间
timeStep时间选择粒度(有分钟的选择器)number—1
startYear起始年份number/string—今年
endYear结束年份number/string—10年的范围
startDate起始日期string——
endDate结束日期string——
startHour起始时间number/string—0
endHour结束时间number/string—23
startMinute起始分钟number/string—0
endMinute结束分钟number/string—59
yearFormat“年“的格式化string—'{value}年'
monthFormat“月“的格式化string—'{value}月'
dayFormat“日“的格式化string—'{value}日'
hourFormat“时“的格式化string—'{value}时'
minuteFormat“分“的格式化string—'{value}分'

4.6.2 用法

<style lang="stylus">
.picker-page {
  .x-list {
    padding: 0 0.32rem;
    background: #fff;
    color: #333;
    font-size: 14px;

    > li {
      min-height: 60px;
      padding-top: 21px;
      border-bottom: 1px solid #f2f2f2;
      overflow: hidden;

      > label {
        float: left;
      }

      > div {
        float: right;
      }

      .x-list-arrow {
        min-width: 100px;
        margin-right: 10px;
        position: relative;

        > div {
          float: right;
          text-align: right;
          margin-right: 10px;
        }

        &:after {
          content: '';
          position: absolute;
          top: 4px;
          right: -5px;
          width: 10px;
          height: 10px;
          border-top: 1px solid #ccc;
          border-right: 1px solid #ccc;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
      }
    }
  }
}
</style>

<template>
<div class="picker-page" v-title data-title="picker">
  <ul class='x-list'>
    <li>
      <label>日期选择</label>
      <div class="x-list-arrow">
        <x-picker title="选择日期" startYear="2016" startDate="2015-01-01" endDate="2019-12-01"  placeholder="请选择日期" v-model="now_date" type="date"></x-picker>
      </div>
    </li>
    <li>
      <label>时间选择</label>
      <div class="x-list-arrow">
        <x-picker title="选择时间" placeholder="请选择时间" startMinute="2" endMinute="30" v-model="now_time" type="time"></x-picker>
      </div>
    </li>
    <li>
      <label>日期时间选择</label>
      <div class="x-list-arrow">
        <x-picker title="选择日期时间" placeholder="请选择日期时间" v-model="now_datetime" :timeStep="20" type="datetime"></x-picker>
      </div>
    </li>
    <li>
      <label>性别选择</label>
      <div class="x-list-arrow">
        <x-picker v-model="gender.value" placeholder="请选择性别" :default="gender.default" title="选择性别" type="custom"></x-picker>
      </div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  data() {
    return {
      gender: {
        default: -1,
        value: [
          {
            name: "保密",
            value: 0
          },
          {
            name: "男",
            value: 1
          },
          {
            name: "女",
            value: 2
          }
        ]
      },
      now_date: null,
      now_time: null,
      now_datetime: null // new Date().getTime()/1000
    };
  }
};
</script>

4.7 select

4.7.1 Attributes

参数说明类型可选值默认值
selectData下拉数据array—[]
title默认显示的标题string—''
alwaysShowTitle是否一直显示默认标题boolean—false
defaultValue默认选中的值number/string—0
widthselect组件的宽度string—'100%'
ellipsisWidthselect文字超过多出省略号的宽度string—'120px'

4.7.2 Events

事件名称说明回调参数
searchselect 选择时的回调函数参数1：索引，参数2：所中项的id值

4.7.3 用法

<template>
  <div class="select-page" v-title data-title="select">
    <x-select
      @search="searchFn"
      :selectData="selectData"
      title="LIST ONE"
      :alwaysShowTitle="false"
      width="50%"
      defaultValue="0"
    ></x-select>
    <x-select
      @search="searchFn1"
      :selectData="selectData1"
      title="LIST TWO"
      width="50%"
      ellipsisWidth="65px"
      defaultValue="1"
    ></x-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectData: [
        { id: 1, name: "LIST ONE 1" },
        { id: 2, name: "LIST ONE 2" },
        { id: 3, name: "LIST ONE 3" },
        { id: 4, name: "LIST ONE 4" },
        { id: 5, name: "LIST ONE 5" }
      ],
      selectData1: [
        { id: 1, name: "LIST TWO 1" },
        { id: 2, name: "LIST TWO 2" },
        { id: 3, name: "LIST TWO 3" },
        { id: 4, name: "LIST TWO 4" },
        { id: 5, name: "LIST TWO 5" }
      ]
    };
  },
  methods: {
    searchFn(index, id) {
      console.log(index, id);
    },
    searchFn1(index, id) {
      console.log(index, id);
    }
  }
};
</script>

4.8 dropdown

这个下拉菜单偏PC端的这里就不多做介绍了

<template>
  <div class="test">
    <x-dropdown trigger="click" @command="commandHandle" :hide-on-click="true">
        <span class="drop-down_link">下拉菜单</span>
        <x-dropdown-menu>
            <x-dropdown-list command="a">下拉列表1</x-dropdown-list>
            <x-dropdown-list command="b">下拉列表2</x-dropdown-list>
            <x-dropdown-list command="c"><h4>下拉列表3</h4></x-dropdown-list>
        </x-dropdown-menu>
    </x-dropdown>
  </div>
</template>

<script>
export default {
  name: 'Dropdown',
  methods: {
    commandHandle (command, instance) {
      console.log(command, instance);
    }
  }
}
</script>


以上组件便是目前vui所有的组件了，后期会不断的进行维护并进行新组件的开发。

vui github传送门：https://github.com/Brickies/vui

vui npm传送门：https://www.npmjs.com/package/x-vui

如果小伙伴们喜欢我的vui，欢迎star。

如果有什么问题欢迎小伙伴们随时提issue

如果有好的组件欢迎小伙伴们随时提pr，我会不定期进行merge

转载于:https://my.oschina.net/qiangdada/blog/1590089

weixin_33744854
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的一个DirectUI库，基础控件基本都已实现
11-09
自己写的一个Direct UI库，部分参考Duilib,按自己的想法实现，模仿java事件监听器机制和android布局文件
W21G2_OneStopGrocery:CSIS-3175 2021年冬季第2组项目
03-16
【标题】"W21G2_OneStopGrocery:CSIS-3175 2021年冬季第2组项目"所涉及的主要知识点是Java编程语言在开发实际项目中的应用，特别是针对一个名为"OneStopGrocery"的系统。这个项目可能是为了解决在线购物、超市管理...
element ui select col 无效_从0开始，手把手带你打造自己的UI库(附文档)
weixin_39910963的博客
11-25 126
从0开始，手把手带你打造自己的UI库(附文档)前言 本篇文章是为了锻炼自己的技术能力还有底子，模仿element-ui进行开发的UI库。纯属学习使用。本文利用Vue-Cli4进行构建。css预编译器用的sass文档地址这里说一下文档。进去会有点慢。服务器原因。没有打包 启动的node服务。(打包因为使用了vue组件，所以出现错误。目前我还不会解决。有大能可以帮忙解决一下最好)githu...
手把手带你打造自己的UI样式库（终章）
qq_40665861的博客
07-26 1393
知识点汇总 页面基础模型 页面的基础模型部分介绍的是在浏览器中渲染一个页面时用到的建模方式。在这个模型中，它会把每个元素涉及成一个带有尺寸、边距的盒子（盒模型）；还设计了每个盒子排布的方式（定位）；同时这些盒子还可以有层叠关系，就要处理他们之间的叠加方式（层级）；此外，这个模型中还包含了页面的渲染方式（页面渲染机制）。这几种模型里都包含了什么具体内容，可以参考下图里的详细划分： CSS 基础 CSS 基础部分讲的是 CSS 语言的特性，包括 CSS 选择器、样式优先级和计量单位。同时，这部分内容里还包含我
手把手带你打造自己的UI样式库（序言）
qq_40665861的博客
05-16 2955
一、 写在前面的话 做前端开发的朋友，现在在写过 CSS时，大部分都是用些第三方的库。例如：Bootstrap，vant，easyUI，elementUI，layui之类的样式库或组件库。在使用这些组件库的时候，我们会发现用这东西写样式太省心了，按着文档给 HTML 上加几个 class，样式就神奇的出来了。 习惯了用这些框架开发以后还会有一种错觉，就是我的 CSS 水平不错了，还能拿出几个挺像样的页面显摆显摆。但实际上，这通常是错觉，当遇到现有 UI 框架满足不了的需求时，自己写起样式来又会感觉特别吃力。
手把手带你打造自己的UI样式库（第五章）之常用页面切图的设计与开发
qq_40665861的博客
07-26 566
常用页面切图的设计与开发 在一些大的前端团队中，前端工程师这个职位会出现一个分支，叫做重构工程师。重构工程师主要负责 HTML 和 CSS 的制作，也就是把设计稿转换成 HTML 和 CSS 代码。重构工作完成以后，把制作好的 HTML 和 CSS 交给 JS 工程师来完成 JS 逻辑的部分。 一、首页的制作 首页整个网站的核心，也是主要功能的入口位置。所以在设计这个页面的时候，我们会把最重要的内容安排进去。这个应用的首页会有搜索功能来直达各个模块，然后会使用网格组件来制作网站的导航，再下面会是一些推荐的文
大前端学习流程
04-15
第五阶段：封装一个属于自己的框架 * 框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架 * 框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装 * 框架封装高级和补充：...
BMP
03-15
在IT领域，Vue.js（简称Vue）是一个轻量级的前端JavaScript框架，由尤雨溪开发，它强调声明式渲染和组件化开发，使得构建用户界面变得更加简单和高效。Vue的核心库专注于视图层，易于学习，同时也能够与其他库或现有...
myshop_store
03-26
"myshop_store"作为一个项目名称，显然旨在创建一个属于自己的在线商店平台，以便更好地展示商品、吸引顾客并进行线上交易。本文将深入探讨构建这样一个平台所需的关键知识点，包括前端开发、后端架构、数据库设计...
手把手带你打造自己的UI样式库（第三章）之常用样式组件的设计与开发
qq_40665861的博客
06-05 1185
常用样式组件的设计与开发 Search搜索框样式的设计与开发 搜索组件的需求 搜索框的功能比较简单，最基本的就是输入和提交两个逻辑。但是我们这个搜索框要额外的加一些细节，输入框分为输入状态和非输入状态，两种状态下输入框表现要有所不同。我们对这个搜索框组件会有以下要求 在搜索框输入后，可以直接点击键盘上的搜索按钮进行查询。这样整个搜索工作都可以在屏幕底部的键盘中完成，不用再去页面顶部点击提交按钮，可以减小操作范围。 在输入状态中，当输入框有内容时，提供一键清空的功能。 在输入状态中，要有输入提示，且整个搜索
手把手带你打造自己的UI样式库（第一章）
qq_40665861的博客
05-19 1825
这一章里主要是介绍一下页面结构基础，CSS 选择器，页面渲染机制，屏幕适配方案，CSS书写规范。 页面结构基础 盒模型 在浏览器中，每一个 DOM 节点渲染后，都会在屏幕上占用一个方形的区域，这个方形的区域就被称为盒子，我们把这种渲染方式叫盒模型。在盒模型中，我们主要介绍盒模型的主要属性、两种盒模型和边距折叠这三个内容： 一、盒模型主要属性 上面的三幅画，其实就是 HTML 中的三个盒子。对盒子大小和位置能产生影响的一共有四类属性，他们分别是： 宽度（width）和高度（height），这两个属性分别决
手把手带你打造自己的UI样式库（第二章）之移动端页面布局
qq_40665861的博客
05-29 1738
移动端页面布局 一 项目的建立 1 项目目录结构 接下来要做的就是建立好项目的目录结构。一个项目的目录层级尽量扁平，不宜太深。根目录下面把样式库的核心CSS代码放在src目录下，里面包含主文件、公共样式和其他组件的样式文件。为了演示效果，在根目录下建立一个demo目录，来存放各个组件的演示代码。在后面还会在根目录下追加存放目标代码的dist目录和实战页面的page目录，这两个目录等用到的时候再建，现在可以按着下面的目录结构建立对应的文件夹和文件。 2 基础文件的建立 一、/src/reset.css文件
微信小程序开发04-打造自己的UI库
weixin_33681778的博客
08-01 153
前言 github地址：https://github.com/yexiaochai/wxdemo 接上文继续，我们前面学习了小程序的生命周期、小程序的标签、小程序的样式，后面我们写了一个简单的loading组件，显然他是个半成品，我们在做loading组件的时候意识到一个问题： 小程序的组件事实上是标签 我们没有办法获得标签的实例，至少我暂时没有办法 所以这些前提让我们对标签的认识有...
手把手教你写 Vue UI 组件库
diaobuwei1238的博客
02-11 137
最近在研究muse-ui的实现，发现网上很少有关于 vue 插件具体实现的文章，官方的文档也只是一笔带过，对于新手来说并不算友好。 笔者结合官方文档，与自己的摸索总结，以最简单的FlexBox组件为例子，带大家入门vue的插件编写，如果您是大牛，不喜勿喷～ 项目结构 | src | ---| plugin | ---| ---| flexbox ...
自已实现一个UI库
HELLO
07-03 4274
几年前的一个嵌入式的UI开发，使自己有机会接触到了UI的一些底层知识，虽然之前也开发过很多Windows下的信息应用系统，也做很多的界面开发，但一直却对UI的一些运作却不了解。 BOSS决定使用UCGUI做为UI的基本库来开发UI界面的一些应用。用UCGUI的库来做开发，它已经有很完善的基本构件，像窗体的管理，基本的控件，图片，文字处理等，不过听说UCGUI的授权费用也是不菲的，但我认为它确实是
手把手带你撸一个vue组件库！
weixin_33858485的博客
05-17 294
前沿 目前，我们能接触到的模块化组件库真可谓是数不胜数，尤其是vue相关的那更是多如牛毛，譬如element，iview等等，虽然有很多，但是轮子虽多，合不合适自己还不好说，就像买衣服，有件衣服虽然好看，但是貌似容纳不了自身肥胖的身躯那也只能望洋兴叹。当然这时候，量身定做就显得那么重要！今天，就一起从头开始定制一套符合自身的vue组件库。 起步 首先，就已了解的组件库的写法也就那么回事，但是编写组...
手把手带你入门微信小程序开发（一）
欢迎来到Gorit的博客
04-10 8498
微信小程序从零开始开发
elementUI 源码-打造自己的组件库，系列一：经典永不过时（先上车）
最新发布
m13837120071的博客
08-07 3592
基于elementUI源码 打造自己的组件库 vue2虽然已逐步被替代 但Element作为非常经典的UI框架 每每阅读总有源源不断的知识可以学习，经典永不过时
H-ui前端框架详细使用指南
H-ui前端框架是一个由北京颖杰联创科技有限公司开发并发布的专业Web前端框架。该框架于2015年8月正式发布，版本号为V0.1，由郭俊辉撰写完成。H-ui设计的主要目标是提供一个简洁、高效、易用的前端解决方案，适用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值