Version 1.0.4 文档

swan-ui

Version 1.0.4

基于Vue框架实现的移动端UI组件库

Github | Examples

swan-ui需要与phoenix-styles样式库配合使用，分别引入组件和样式。

组件引入方式

  • script标签引入
  • 全局注册
  • 按需引入注册

样式引入方式

  • html中link标签引入
  • 从npm包引入

推荐组件用按需引入的方式，样式可根据需要选择合适的方式。

引入组件

script标签引入
<!-- 引入样式 -->
<link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" />
<!-- 移动端适配 -->
<script type="text/javascript" src="https://www.dpfile.com/app/gfs-viewport/gfs-viewport.js"></script>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="http://future-team.github.io/swan-ui/lib/index.js"></script>
<template>
    <div id="app">
        <sw-button @click="visible = true" block>按钮</sw-button>
        <sw-dialog v-model="visible" title="Hello world">
            <p>欢迎使用 Swan UI</p>
        </sw-dialog>
    </div>
<template>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return { visible: false }
        }
    })
</script>
从npm包引入
安装
$ npm install swan-ui --save
$ npm install phoenix-styles --save
全局注册
import Vue from 'vue'
import SwanUI from 'swan-ui'

Vue.use(SwanUI)
按需引入
import Vue from 'vue'
import { Button, Star} from 'swan-ui'
//import Button from 'swan-ui/lib/Button'
//import Star from 'swan-ui/lib/Star'
Vue.component(Button.name,Button)
Vue.component(Star.name,Star)

引入样式

link标签引入
<!-- html引入 -->
<link rel="stylesheet" href="http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css" />
从npm包导入
.vue文件中 
<style lang="less" src="phoenix-styles/less/phoenix-styles.less">
或者在js文件中引入 
<!-- 全部引入 -->
import 'phoenix-styles/dist/phoenix-styles.min.css'
<!-- 按需引入 -->
import 'phoenix-styles/less/modules/buttons.less'
<!-- 全部引入 -->
import 'phoenix-styles/less/phoenix-styles.less'
另外，如果要换成ios主题的皮肤，可引入 
import 'phoenix-styles/dist/ios-skin.min.css'