Skip to content

Commit

Permalink
Merge pull request #66 from tolking/nutui
Browse files Browse the repository at this point in the history
refactor: 迁移UI框架 taro-ui-vue3 到 nutui
  • Loading branch information
bobohuochai authored Nov 21, 2021
2 parents 6c9fe21 + 66ee425 commit 6ca33ad
Show file tree
Hide file tree
Showing 27 changed files with 582 additions and 888 deletions.
14 changes: 14 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
{
"env": {
"browser": true,
"node": true
},
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"globals": {
"defineProps": "readonly",
"defineEmits": "readonly",
"defineExpose": "readonly",
"withDefaults": "readonly"
},
"plugins": ["@typescript-eslint"],
"extends": ["taro/vue3"]
}
22 changes: 21 additions & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,25 @@ module.exports = {
framework: 'vue3',
ts: true
}]
]
],
plugins: [
[
'import',
{
libraryName: '@nutui/nutui',
libraryDirectory: 'dist/packages/_es',
camel2DashComponentName: false,
},
'nutui3-vue',
],
[
'import',
{
libraryName: '@nutui/nutui-taro',
libraryDirectory: 'dist/packages/_es',
camel2DashComponentName: false,
},
'nutui3-taro',
],
],
}
5 changes: 3 additions & 2 deletions config/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const config = {
pxtransform: {
enable: true,
config: {

selectorBlackList: [/nut-/],
}
},
url: {
Expand Down Expand Up @@ -55,7 +55,8 @@ const config = {
}
}
}
}
},
plugins: ['@tarojs/plugin-html'],
}

module.exports = function(merge) {
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,24 @@
"author": "",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@nutui/nutui-taro": "^3.1.11",
"@tarojs/components": "3.3.11",
"@tarojs/runtime": "3.3.11",
"@tarojs/taro": "3.3.11",
"hairline": "^1.0.0",
"taro-ui-vue3": "^1.0.0-alpha.21",
"vue": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.3.11",
"@tarojs/plugin-html": "3.3.11",
"@tarojs/plugin-less": "^2.2.10",
"@tarojs/webpack-runner": "3.3.11",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"@vue/compiler-sfc": "^3.0.0",
"babel-plugin-import": "^1.13.3",
"babel-preset-taro": "3.3.11",
"eslint": "^6.8.0",
"eslint-config-taro": "3.3.11",
Expand Down
9 changes: 0 additions & 9 deletions src/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,5 @@ export default {
"text": "我的"
}]
},
"quickMenu": {
"share": true,
"favorite": true,
"sendToDesktop": true
},
"debug": false,
"pageAlias": {
"index": "pages/index/index",
"me": "pages/me/index"
}
}
31 changes: 18 additions & 13 deletions src/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,18 @@
* @FilePath: /mp-bbhj/src/app.ts
*/
import { createApp } from 'vue'
import { createUI } from 'taro-ui-vue3'
import { NavBar, Contact, ListContent, ShowArticle, ListRescueCard } from './components/index'
import {
Icon,
SearchBar,
Cell,
CellGroup,
Button,
Collapse,
CollapseItem,
} from '@nutui/nutui-taro'
import { mpAutoUpdate } from './common/utils.js'
import "@nutui/nutui-taro/dist/style.css";
import './app.less'
// import 'taro-ui-vue3/dist/style/index.scss'



const App = createApp({
onShow(options) {
Expand All @@ -23,13 +28,13 @@ const App = createApp({
// 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
})

const tuv3 = createUI()
App.use(tuv3)

App.component(NavBar.name, NavBar)
App.component(Contact.name, Contact)
App.component(ListContent.name, ListContent)
App.component(ListRescueCard.name, ListRescueCard)
App.component(ShowArticle.name, ShowArticle)
App
.use(Icon)
.use(SearchBar)
.use(Cell)
.use(CellGroup)
.use(Button)
.use(Collapse)
.use(CollapseItem)

export default App
9 changes: 2 additions & 7 deletions src/components/Contact.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
<template>
<AtButton class="connect" @click="handleOpenCustomerServiceChat">
<button class="connect" @tap="handleOpenCustomerServiceChat">
<view class="text">微信客服</view>
</AtButton>
</button>
</template>


<script>
import { computed, defineComponent, PropType, toRefs } from "vue";
import { AtButton } from "taro-ui-vue3";
import Taro from "@tarojs/taro";
export default defineComponent({
name: "Contact",
components: {
AtButton,
},
methods: {
handleOpenCustomerServiceChat() {
Taro.openCustomerServiceChat({
Expand Down
130 changes: 130 additions & 0 deletions src/components/ContentItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<template>
<view class="article_list_item" @tap="jumpToDetail">
<view
class="article_detail"
>
<view class="artclie_text_msg">
<view class="article_author">
<view class="nickname">{{ item.nickname }}</view>
</view>
<view class="article_title"> {{ item.title }}</view>
<view>
<view> <text style="color:red;">失踪时间:</text> {{item.missed_at}}</view>
<view> <text style="color:red;">失踪地点:</text> {{item.missed_address}}</view>
</view>
</view>
</view>
</view>
</template>

<script setup>
import { navigateTo } from "@tarojs/taro";
import { toRefs } from "vue"
const props = defineProps(['item'])
const { item } = toRefs(props)
function jumpToDetail() {
navigateTo({
url: `/pages/article/detail/index?id=${item.value.id}`
})
}
</script>

<style lang="less">
.ellipsis {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.article_list_item {
box-sizing: border-box;
background: #fff;
// margin-bottom: 20rpx;
.article_detail {
box-sizing: border-box;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f5f6f6;
padding: 20rpx 40rpx;
.artclie_text_msg {
flex: 1;
}
.article_author {
display: flex;
align-items: center;
padding-bottom: 16rpx;
.img {
height: 40rpx;
width: 40rpx;
border-radius: 50%;
}
.nickname {
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
margin-left: 11rpx;
}
}
.article_title {
font-size: 36rpx;
color: #333333;
.ellipsis;
}
.article_description {
color: #999999;
font-size: 28rpx;
.ellipsis;
}
.detail-btn{
border:none;
background: none;
color: #313BD1;
width :3rem;
float: right;
}
}
.img_cover {
width: 160rpx;
height: 160rpx;
border-radius: 4px;
display: inline-block;
margin-left: 40rpx;
}
.article_other {
display: flex;
color: #999999;
font-size: 28rpx;
height: 88rpx;
align-items: center;
view {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.img {
height: 28rpx;
width: 30rpx;
margin-right: 10rpx;
}
.acticle_comments {
.img {
width: 35rpx;
}
}
}
}
</style>
Loading

0 comments on commit 6ca33ad

Please sign in to comment.