Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 367
Star 3
Fork 8
H
hello-uvue
提交 ab8dd6b7 编写于 作者: 雪洛's avatar 雪洛
浏览文件
操作

feat: 调整代码支持web端

上级 b11a004b
隐藏空白更改
内联 并排
Showing with 53 addition and 43 deletion
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ ab8dd6b7
......@@ -35,8 +35,8 @@
return {
height: 0,
is_open: this.open as boolean,
boxNode: null as Element | null,
contentNode: null as Element | null,
boxNode: null as UniElement | null,
contentNode: null as UniElement | null,
};
},
watch: {
......@@ -51,8 +51,8 @@
$dispatch(this, 'UniCollapse', 'init', this)
},
mounted() {
this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element;
this.boxNode = this.$refs['boxRef'] as UniElement;
this.contentNode = this.$refs['contentRef'] as UniElement;
// this.openCollapse(this.open)
},
methods: {
......@@ -67,12 +67,12 @@
openOrClose(open: boolean) {
const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none';
let hide = open ? 'flex' : 'none';
const opacity = open ? 1 : 0
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide);
this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity);
})
}
......@@ -80,9 +80,9 @@
}
</script>
<style scoped>
.uni-collapse-item {
background-color: #fff;
<style scoped>
.uni-collapse-item {
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
......@@ -90,7 +90,7 @@
padding: 12px;
background-color: #fff;
}
.down_arrow {
width: 8px;
height: 8px;
......@@ -113,11 +113,11 @@
font-size: 14px;
font-weight: 400;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.open--active {
/* background-color: #f0f0f0; */
color: #bbb;
}
.is-disabled {
color: #999;
......@@ -132,7 +132,7 @@
width: 100%;
/* transition-property: transform , opacity;
transition-duration: 0.2s; */
transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
</style>
</style>
pages.json
浏览文件 @ ab8dd6b7
......@@ -331,6 +331,7 @@
"navigationBarTitleText": "render function"
}
},
// #ifdef APP
{
"path": "pages/composition/mixins/mixins",
"style": {
......@@ -343,6 +344,7 @@
"navigationBarTitleText": "mixins-page-2"
}
},
// #endif
{
"path": "pages/composition/provide/provide",
"style": {
......@@ -493,12 +495,14 @@
"navigationBarTitleText": "toRef"
}
},
// #ifdef APP
{
"path": "pages/composition-api/reactivity/to-value/to-value",
"style": {
"navigationBarTitleText": "toValue"
}
},
// #endif
{
"path": "pages/composition-api/reactivity/to-refs/to-refs",
"style": {
......@@ -584,7 +588,6 @@
}
}
],
// #ifdef APP
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
......@@ -601,7 +604,6 @@
}
]
},
// #endif
"globalStyle": {
"pageOrientation": "portrait",
"navigationBarTitleText": "Hello UVUE",
......
pages/component-instance/methods/call-method-uni-element.uvue
浏览文件 @ ab8dd6b7
......@@ -12,7 +12,7 @@
}
},
onReady() {
// 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)Element
// 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement
this.$slider1 = this.$refs['slider1'] as UniSliderElement;
},
methods: {
......
pages/component-instance/options/options.uvue
浏览文件 @ ab8dd6b7
......@@ -20,7 +20,7 @@ export default {
}
},
mounted () {
this.name = this.$options.name
this.name = this.$options.name!
},
methods: {
// getCustomKey (): string {
......
pages/composition-api/reactivity/readonly/readonly.uvue
浏览文件 @ ab8dd6b7
......@@ -34,9 +34,11 @@
data.arr.push('d')
}
// #ifdef APP
const updateReadonlyData = () => {
readonlyData.str = 'new readonly str'
readonlyData.num++
readonlyData.arr.push('e')
}
// #endif
</script>
\ No newline at end of file
pages/composition-api/reactivity/shallow-readonly/shallow-readonly.uvue
浏览文件 @ ab8dd6b7
......@@ -29,6 +29,7 @@
} as StateNested
} as State)
// #ifdef APP
const incrementStateCount = () => {
state.count++
}
......@@ -36,6 +37,7 @@
const incrementStateNestedCount = () => {
state.nested.count++
}
// #endif
const updatePageRender = () => {
pageKey.value = Date.now()
......
pages/composition-api/reactivity/watch-effect/watch-effect.uvue
浏览文件 @ ab8dd6b7
......@@ -43,16 +43,16 @@
arr : number[]
}
const countRef = ref(null)
const countRef = ref<UniElement | null>(null)
const count = ref(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
const watchCountTrackNum = ref(0)
const watchCountTriggerNum = ref(0)
const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {
const stopWatchCount = watchEffect((onCleanup: OnCleanup) => {
if (countRef.value !== null) {
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value as Element).getAttribute('value')}`
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value as UniElement).getAttribute('value')}`
} else {
watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `
}
......@@ -95,11 +95,11 @@
watchObjRes.value = `obj: ${JSON.stringify(obj)}`
})
const objStrRef = ref(null)
const objStrRef = ref<UniElement | null>(null)
const watchObjStrRes = ref('')
watchEffect(() => {
if (objStrRef.value !== null) {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value as Element).getAttribute('value')}`
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value as UniElement).getAttribute('value')}`
} else {
watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `
}
......@@ -108,11 +108,11 @@
flush: 'pre',
})
const objBoolRef = ref(null)
const objBoolRef = ref<UniElement | null>(null)
const watchObjBoolRes = ref('')
watchEffect(() => {
if (objBoolRef.value !== null) {
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value as Element).getAttribute('value')}`
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value as UniElement).getAttribute('value')}`
} else {
watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `
}
......
pages/composition-api/reactivity/watch/watch.uvue
浏览文件 @ ab8dd6b7
......@@ -43,28 +43,28 @@
arr : number[]
}
const countRef = ref(null)
const countRef = ref<UniElement | null>(null)
const count = ref(0)
const watchCountRes = ref('')
const watchCountCleanupRes = ref('')
const watchCountTrackNum = ref(0)
const watchCountTriggerNum = ref(0)
const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value as Element).getAttribute('value')}`
const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup: OnCleanup) => {
watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value as UniElement).getAttribute('value')}`
const cancel = () => {
watchCountCleanupRes.value = `watch count cleanup: ${count}`
}
onCleanup(cancel)
}, {
}, {
// 侦听器在响应式依赖改变时立即触发
flush: 'sync',
flush: 'sync',
// 响应属性或引用作为依赖项被跟踪时调用
onTrack(event : DebuggerEvent) {
if (event.type === 'get') {
watchCountTrackNum.value++
}
},
},
// 侦听器回调被依赖项的变更触发时调用
onTrigger(event : DebuggerEvent) {
if (event.type === 'set') {
......@@ -88,24 +88,24 @@
// immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值
const watchObjRes = ref('')
watch(obj, (obj : Obj, prevObj : Obj) => {
watch(obj, (obj : Obj, prevObj ?: Obj) => {
watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`
}, { immediate: true })
const objStrRef = ref(null)
const objStrRef = ref<UniElement | null>(null)
const watchObjStrRes = ref('')
watch(() : string => obj.str, (str : string, prevStr : string) => {
watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value as Element).getAttribute('value')}`
}, {
watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value as UniElement).getAttribute('value')}`
}, {
// 侦听器在组件渲染之前触发
flush: 'pre',
})
const objBoolRef = ref(null)
const objBoolRef = ref<UniElement | null>(null)
const watchObjBoolRes = ref('')
watch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {
watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value as Element).getAttribute('value')}`
}, {
watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value as UniElement).getAttribute('value')}`
}, {
// 侦听器延迟到组件渲染之后触发
flush: 'post'
})
......
pages/composition/mixins/components/Comp1.uvue
浏览文件 @ ab8dd6b7
......@@ -47,7 +47,7 @@ export default {
}
},
mounted(){
const rootElement = this.$refs['mixin-comp-root'] as Element
const rootElement = this.$refs['mixin-comp-root'] as UniElement
this.rootElementTitle = rootElement.getAttribute('title')
},
methods: {
......
pages/composition/mixins/components/Comp2.uvue
浏览文件 @ ab8dd6b7
......@@ -48,7 +48,7 @@ export default {
}
},
mounted(){
const rootElement = this.$refs['mixin-comp-root'] as Element
const rootElement = this.$refs['mixin-comp-root'] as UniElement
this.rootElementTitle = rootElement.getAttribute('title')
},
watch: {
......
pages/tab-bar/composition-api.uvue
浏览文件 @ ab8dd6b7
......@@ -146,7 +146,11 @@
{
name: 'toValue',
url: 'to-value',
// #ifdef APP
enable: true,
// #else
enable: false,
// #endif
},
{
name: 'toRefs',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或