{"id":19345583,"url":"https://github.com/future-team/swan-ui","last_synced_at":"2025-04-23T04:36:37.051Z","repository":{"id":57375986,"uuid":"96274816","full_name":"future-team/swan-ui","owner":"future-team","description":"Vue Components for Mobile App.","archived":false,"fork":false,"pushed_at":"2017-11-14T11:21:51.000Z","size":4625,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-13T20:40:21.832Z","etag":null,"topics":["component","lib","swan-ui","vue","vue-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/future-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-05T03:53:18.000Z","updated_at":"2024-08-05T01:40:00.000Z","dependencies_parsed_at":"2022-09-02T18:21:12.072Z","dependency_job_id":null,"html_url":"https://github.com/future-team/swan-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Fswan-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Fswan-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Fswan-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-team%2Fswan-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/future-team","download_url":"https://codeload.github.com/future-team/swan-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250372465,"owners_count":21419719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","lib","swan-ui","vue","vue-components"],"created_at":"2024-11-10T04:07:09.934Z","updated_at":"2025-04-23T04:36:32.494Z","avatar_url":"https://github.com/future-team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 介绍\n\nSwan UI 是一个基于vuejs的移动端组件库，包含丰富的css和js组件。我们的初衷是开发一套展现一致、与业务相契合的组件库，与 [pheonix-styles](https://future-team.github.io/phoenix-styles/example/index.html) 样式库配合使用。组件库在github上开源，也欢迎大家来共同开发。\n\n- [项目地址](https://github.com/future-team/swan-ui)\n- [文档](http://future-team.github.io/swan-ui/doc/index.html)（文档工具开发中，后续会做迁移）\n- [示例](http://future-team.github.io/swan-ui/examples/index.html)\n### 组件\n\n- 基础类\n- 表单类\n- 布局类\n- 弹框类\n- 操作类\n- 组合类\n\n### 兼容性\n\n- Android 4.4 +\n- IOS 8+\n- Chrome\n\n### vue版本\n- 要求`v2.4.0`及以上\n\n### 基础知识\n\n- [vue](https://cn.vuejs.org/v2/guide/)\n- [vue-loader](https://vue-loader.vuejs.org/zh-cn/)\n- [webpack](https://doc.webpack-china.org/concepts/)\n\n### 安装\n\n```\nnpm install swan-ui --save\nnpm install pheonix-styles --save\n```\n\n## CSS样式\n\n### 关于pheonix-styles\npheonix-styles是一套遵循视觉规范的样式库，我们的vue组件库swan-ui和react组件库pheonix-ui都是基于pheonix-styles的dom结构编写的。在使用组件库时，需要引入样式库phoenix-styles。\n\n可以在html中引入：\n\n```xml\n\u003clink rel=\"stylesheet\" href=\"http://future-team.github.io/phoenix-styles/dist/phoenix-styles.min.css\" /\u003e\n```\n\n也可以在js文件中引入：\n\n```javascript\nimport 'phoenix-styles/dist/phoenix-styles.css'\n//或者\nimport 'phoenix-styles/less/phoenix-less'\n```\n\n或者在.vue文件用style标签引入：\n\n```xml\n\u003cstyle lang=\"less\" src=\"phoenix-styles/less/phoenix-styles.less\"\u003e\u003c/style\u003e\n```\n\n### 自定义组件样式\n在使用组件时，我们可以自定义样式，覆盖组件样式：\n\n```xml\n\u003csw-button class=\"bg-color\"\u003e按钮\u003c/sw-button\u003e\n```\n如果无法覆盖，可以写成动态样式的形式：\n\n```xml\n\u003csw-button :class=\"{'bg-color':true}\"\u003e默认按钮\u003c/sw-button\u003e\n```\n\n另一种方式是直接修改phoenix-styles的样式：\n\n```css\n.ph-button-primary{\n\tbackground-color: red;\n}\n```\n\n还有一种方式就是使用内联样式：\n\n```xml\n\u003csw-button style=\"background-color: red;\"\u003e按钮\u003c/sw-button\u003e\n```\n## 组件命名规范\n\n**事件命名**\n \n- 自定义事件以 \t`on-xx`开头，最多三个单词，例如 `@on-before-close`\n- 自定义原生事件直接使用原声事件名，方便使用。例如 `@click`、`@change`、`@input`、`@drag`\n\n**事件处理器命名**\n \n - 以`handleXXX`命名，例如 handleClick、handleChange、handleInput\n\n \n**slot插槽命名**\n \n 主体内容一般使用默认名defalut，不需要设置。其他slot命名一般是：\n\n - title\n - header\n - footer\n\n## 整体结构\n\u003cimg src=\"./image/swan-vue-webpack.png\"/\u003e\n\n## 快速上手\n可以使用官方提供的脚手架工具 [vue-cli](https://github.com/vuejs/vue-cli)来创建项目，也可以跟着下面的步骤来创建项目。\n\n### 新建项目\n\n目录结构\n\n```\n.\n├── .babelrc\n├── README.md\n├── index.html\n├── package.json\n├── src\n│   ├── App.vue\n│   └── main.js\n└── webpack.config.js\n```\n\n配置文件\n\n.babelrc\n\n```javascript\n{\n  \"presets\": [\n  \t\t[\"es2015\", { \"modules\": false }]\n  ],\n  \"plugins\": [\"transform-vue-jsx\"]\n}\n\n```\n\nwebpack.config.js\n\n```javascript\nvar path = require('path')\nvar webpack = require('webpack')\nvar ExtractTextPlugin = require(\"extract-text-webpack-plugin\")\n\nmodule.exports = {\n  entry: './src/main.js',\n  output: {\n    path: path.resolve(__dirname, './dist'),\n    publicPath: '/dist/',\n    filename: 'build.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader',\n        options: {\n          extractCSS: true\n        }\n      },\n      {\n        test: /\\.js$/,\n        use: 'babel-loader',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.css$/,\n        use: ExtractTextPlugin.extract('css-loader')\n      },\n      {\n          test:/\\.less$/,\n          use:  ExtractTextPlugin.extract('less-loader')\n      },\n      {\n        test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/,\n        use: 'file-loader?name=../dist/iconfont/[name].[ext]'\n      }\n    ]\n  },\n  devServer: {\n    historyApiFallback: true,\n    noInfo: true\n  },\n  devtool: '#eval-source-map',\n  plugins: [\n    new ExtractTextPlugin(\"style.css\")\n  ]\n}\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports.devtool = '#source-map'\n  module.exports.plugins = (module.exports.plugins || []).concat([\n    new webpack.DefinePlugin({\n      'process.env': {\n        NODE_ENV: '\"production\"'\n      }\n    }),\n    new webpack.optimize.UglifyJsPlugin({\n      compress: {\n        warnings: false\n      }\n    })\n  ])\n}\n```\n\npackage.json\n\n```javascript\n{\n  \"name\": \"swan-quick-start\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"scripts\": {\n    \"dev\": \"webpack-dev-server --inline --hot --port 4000\",\n    \"build\": \"webpack\"\n  },\n  \"author\": \"chang20159@foxmail.com\",\n  \"devDependencies\": {\n    \"babel-core\": \"^6.26.0\",\n    \"babel-loader\": \"^7.1.2\",\n    \"babel-preset-es2015\": \"^6.24.1\",\n    \"css-loader\": \"^0.28.7\",\n    \"extract-text-webpack-plugin\": \"^3.0.0\",\n    \"file-loader\": \"^0.11.2\",\n    \"less\": \"^2.7.2\",\n    \"less-loader\": \"^4.0.5\",\n    \"style-loader\": \"^0.18.2\",\n    \"vue-loader\": \"^13.0.4\",\n    \"vue-template-compiler\": \"^2.4.3\",\n    \"webpack\": \"^3.5.6\",\n    \"webpack-dev-server\": \"^2.7.1\"\n  },\n  \"dependencies\": {\n    \"phoenix-styles\": \"^2.0.6\",\n    \"swan-ui\": \"^1.0.5\",\n    \"vue\": \"^2.4.3\"\n  }\n}\n\n```\n\n### 引入组件\n\n在main.js中可通过如下几种方式引入需要的组件：\n\n**整体引入**\n\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\nimport 'phoenix-styles/dist/phoenix-styles.css'\n\nimport SwanUI from 'swan-ui'\nVue.use(SwanUI)\n```\n\n**按需引入**\n\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\nimport 'phoenix-styles/dist/phoenix-styles.css'\n\nimport {Button,Image,ImageList} from 'swan-ui'\nVue.component(Button.name,Button)\nVue.component(Image.name,Image)\nVue.component(ImageList.name,ImageList)\n```\n\n**按需引入**\n\n```javascript\nimport Vue from 'vue'\nimport App from './App.vue'\nimport 'phoenix-styles/dist/phoenix-styles.css'\n\nimport Button from 'swan-ui/lib/Button'\nimport Image from 'swan-ui/lib/Image'\nimport ImageList from 'swan-ui/lib/ImageList'\nVue.component(Button.name,Button)\nVue.component(Image.name,Image)\nVue.component(ImageList.name,ImageList)\n```\n\n或者在App.vue中局部注册：\n\n```javascript\nimport {Button,Image,ImageList} from 'swan-ui'\nexport default {\n\tname: 'App',\n\tcomponents: {\n\t    [Button.name]:Button,\n\t    [Image.name]:Image,\n\t    [ImageList.name]: ImageList\n\t}\n}\n```\n\n### 使用组件\n然后在App.vue中使用组件：\n\n```\n\u003ctemplate\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003ch4\u003eHello, Swan UI\u003c/h4\u003e\n        \u003csw-image-list :column=\"2\"\u003e\n            \u003csw-image v-for=\"(item,index) in images\" \n                      :key=\"index\"\n                      :src=\"item\"\u003e\u003c/sw-image\u003e\n        \u003c/sw-image-list\u003e\n        \u003csw-button class=\"fix-bottom\" \n                   block \n                   @click=\"handleClick\"\u003e点我查看图片\u003c/sw-button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import {Button,Image,ImageList} from 'swan-ui'\n    export default {\n        components: {\n            [Button.name]:Button,\n            [Image.name]:Image,\n            [ImageList.name]: ImageList\n        },\n        data(){\n            return{\n                images: null\n            }\n        },\n        methods:{\n            handleClick(){\n                this.images = [\n                    'https://fuss10.elemecdn.com/b/2e/a6c333694efb4db66c6a3ba07e9d8jpeg.jpeg?imageMogr2/thumbnail/200x200/format/webp/quality/85',\n                    'https://fuss10.elemecdn.com/e/6c/0de9d18ef47292380826be8d8cfe8jpeg.jpeg?imageMogr2/thumbnail/200x200/format/webp/quality/85',\n                    'https://fuss10.elemecdn.com/9/78/f449290a86fb3ca7d793a5cc50344jpeg.jpeg?imageMogr2/thumbnail/200x200/format/webp/quality/85',\n                    'https://fuss10.elemecdn.com/b/ce/fdff43a9ea94d46706be48f50bc26jpeg.jpeg?imageMogr2/thumbnail/200x200/format/webp/quality/85'\n                ]\n            }\n        }\n    }\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\"\u003e\n    .container{\n        h4{\n            text-align: center;\n            margin-top: 20px;\n        }\n    }\n    .fix-bottom{\n        position: fixed;\n        bottom: 15px;\n    }\n\u003c/style\u003e\n```\n\n\n最后在main.js中将节点添加到id为app的dom节点：\n\n```\nnew Vue({\n  el: '#app',\n  render: h =\u003e h(App)\n})\n```\n\n### 运行\n\n```\nnpm run build\n```\n\n```\nnpm run dev\n```\n\n## 版本更新\n\n- v1.0.2 提供压缩/未压缩打包文件\n- v1.0.3 修复TabSet组件无法动态更新的问题\n- v1.0.4 统一事件名称、filter组件数据结构、补充文档\n- v1.0.5 修复prompt默认取消按钮无法关闭问题\n- v1.0.6 修复Image无法动态更新\n- v1.0.7 修复Toast文字溢出 \u0026\u0026 添加logger\n- v1.0.8 修复Object.assign兼容性问题\n\n## 更多\n\n- 基于React的移动端组件库 [phoenix-ui](https://future-team.github.io/phoenix-ui/doc/)\n- 图标库 [gfs-icons](https://future-team.github.io/gfs-icons/index.html)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Fswan-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuture-team%2Fswan-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-team%2Fswan-ui/lists"}