Skip to content

Commit

Permalink
chore(nav): move to setup sugar (jd-opensource#2551)
Browse files Browse the repository at this point in the history 
* chore: elevator

* chore: fixednav

* chore: fixed-nav

* chore: menu

* chore: navbar

* chore: pagination

* chore: sidenavbar

* chore: tabbar

* chore: tabs
  • Loading branch information
@eiinu
eiinu authored Sep 7, 2023
1 parent d4470ef commit 8034b3d
Show file tree
Hide file tree
Showing 35 changed files with 3,531 additions and 4,844 deletions.
513 changes: 251 additions & 262 deletions packages/nutui-taro-demo/src/nav/pages/elevator/index.vue
View file

Large diffs are not rendered by default.

89 changes: 35 additions & 54 deletions packages/nutui-taro-demo/src/nav/pages/fixednav/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,66 +43,47 @@
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { Retweet } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
const env = Taro.getEnv();
const visible = ref(false);
const visible1 = ref(false);
const visible2 = ref(false);
const myActive = ref(false);
export default {
props: {},
components: { Retweet, Header },
setup() {
const env = Taro.getEnv();
onMounted(() => {
setTimeout(() => {
visible2.value = true;
}, 1000);
});
const visible = ref(false);
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const myActive = ref(false);
onMounted(() => {
setTimeout(() => {
visible2.value = true;
}, 1000);
});
const navList = reactive([
{
id: 1,
text: '首页',
icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
},
{
id: 2,
text: '分类',
icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
},
{
id: 3,
text: '购物车',
num: 2,
icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
},
{
id: 4,
text: '我的',
icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
}
]);
const selected = (res: any) => {
console.log(res);
};
return {
visible,
visible1,
visible2,
visible3,
myActive,
navList,
selected,
env
};
const navList = reactive([
{
id: 1,
text: '首页',
icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
},
{
id: 2,
text: '分类',
icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
},
{
id: 3,
text: '购物车',
num: 2,
icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
},
{
id: 4,
text: '我的',
icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
}
]);
const selected = (res: any) => {
console.log(res);
};
</script>
107 changes: 44 additions & 63 deletions packages/nutui-taro-demo/src/nav/pages/menu/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,75 +50,56 @@
</div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { TriangleDown, Checked } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default {
components: {
TriangleDown,
Checked,
Header
},
props: {},
setup() {
const env = Taro.getEnv();
const env = Taro.getEnv();
const state = reactive({
options1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 }
],
options2: [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' }
],
options3: [
{ text: '全部商品', value: 0 },
{ text: '家庭清洁/纸品', value: 1 },
{ text: '个人护理', value: 2 },
{ text: '美妆护肤', value: 3 },
{ text: '食品饮料', value: 4 },
{ text: '家用电器', value: 5 },
{ text: '母婴', value: 6 },
{ text: '数码', value: 7 },
{ text: '电脑、办公', value: 8 },
{ text: '运动户外', value: 9 },
{ text: '厨具', value: 10 },
{ text: '医疗保健', value: 11 },
{ text: '酒类', value: 12 },
{ text: '生鲜', value: 13 },
{ text: '家具', value: 14 },
{ text: '传统滋补', value: 15 },
{ text: '汽车用品', value: 16 },
{ text: '家居日用', value: 17 }
],
value1: 0,
value2: 'a',
value3: 0
});
const state = reactive({
options1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 }
],
options2: [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' }
],
options3: [
{ text: '全部商品', value: 0 },
{ text: '家庭清洁/纸品', value: 1 },
{ text: '个人护理', value: 2 },
{ text: '美妆护肤', value: 3 },
{ text: '食品饮料', value: 4 },
{ text: '家用电器', value: 5 },
{ text: '母婴', value: 6 },
{ text: '数码', value: 7 },
{ text: '电脑、办公', value: 8 },
{ text: '运动户外', value: 9 },
{ text: '厨具', value: 10 },
{ text: '医疗保健', value: 11 },
{ text: '酒类', value: 12 },
{ text: '生鲜', value: 13 },
{ text: '家具', value: 14 },
{ text: '传统滋补', value: 15 },
{ text: '汽车用品', value: 16 },
{ text: '家居日用', value: 17 }
],
value1: 0,
value2: 'a',
value3: 0
});
const item = ref('');
const item = ref('');
const onConfirm = () => {
item.value.toggle();
};
const handleChange = (val) => {
console.log('val', val);
};
const onConfirm = () => {
item.value.toggle();
};
return {
state,
item,
onConfirm,
handleChange,
env
};
}
const handleChange = (val) => {
console.log('val', val);
};
</script>

Expand Down
61 changes: 23 additions & 38 deletions packages/nutui-taro-demo/src/nav/pages/navbar/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,48 +70,33 @@
</div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
<script setup lang="ts">
import { ref } from 'vue';
import { ShareN, Cart2, MoreX, HorizontalN } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default defineComponent({
components: { ShareN, Cart2, MoreX, HorizontalN, Header },
setup({}) {
const env = Taro.getEnv();
const env = Taro.getEnv();
const tab1value = ref(0);
const tab2value = ref(0);
const back = () => {
console.log('header头部， 点击返回');
};
const title = () => {
console.log('header头部， 点击title');
};
const icon = () => {
console.log('icon');
};
const tab1value = ref(0);
const tab2value = ref(0);
const methods = {
back() {
console.log('header头部， 点击返回');
},
title() {
console.log('header头部， 点击title');
},
icon() {
console.log('icon');
},
rightClick() {
console.log('右侧点击事件');
},
changeTab(tab: any) {
tab1value.value = tab.paneKey as number;
},
changeTabList(tab: any) {
tab2value.value = tab.paneKey as number;
}
};
return {
tab1value,
tab2value,
...methods,
env
};
}
});
const rightClick = () => {
console.log('右侧点击事件');
};
const changeTab = (tab: any) => {
tab1value.value = tab.paneKey as number;
};
const changeTabList = (tab: any) => {
tab2value.value = tab.paneKey as number;
};
</script>

<style lang="scss">
Expand Down
34 changes: 10 additions & 24 deletions packages/nutui-taro-demo/src/nav/pages/pagination/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,31 +22,17 @@
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import { Left, Right } from '@nutui/icons-vue-taro';
import { reactive, toRefs, defineComponent } from 'vue';
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default defineComponent({
components: { Left, Right, Header },
setup() {
const env = Taro.getEnv();
const state = reactive({
currentPage: 1,
currentPage1: 1,
currentPage2: 1,
currentPage3: 1
});
const pageChange = (value: number) => {
console.log(value);
};
return {
...toRefs(state),
pageChange,
env
};
}
});
const env = Taro.getEnv();
const currentPage = ref(1);
const currentPage1 = ref(1);
const currentPage2 = ref(1);
const currentPage3 = ref(1);
const pageChange = (value: number) => {
console.log(value);
};
</script>
Loading

0 comments on commit 8034b3d

Please sign in to comment.