webcomponent

3 years ago · 90c83d6e64
parent 24768237e2
commit 90c83d6e64
3 changed files with 114 additions and 2 deletions
--- a/share/index.html
+++ b/share/index.html
@ -7,20 +7,27 @@
 		<link rel="stylesheet" href="./main.css" />
 	</head>
 	<body>
+		
 		<div id="app">
 			<button @click="cl">{{ message }}</button>
 			<p>Count is: {{ count }}</p>
 		</div>
 		<div id="square"><div v-html="rawHtml">loading...</div></div>
 		<script>
-			const { createApp, ref, onMounted } = Vue
+			const { createApp, ref, onMounted, onUnmounted,onBeforeMount,onUpdated,version } = Vue
 			const app = createApp({
 			  setup(){
-				  const message = ref('Hello Vue!')
+				  const message = ref(`Hello Vue ${version} !`)
 				  let count = ref(1)
 				  const cl = function(){
 					  count.value ++
 				  }
+				  onMounted(()=>{
+					  console.log(app.config)
+				  })
+				  onUpdated(()=>{
+					  console.log('onUpdated')
+				  })
 				  return {
 					  message,
 					  count,
@ -39,6 +46,12 @@
 							rawHtml += `<div style="background:rgba(${i},${j},${Math.random()*255},.5)">${start}</div>`
 						}
 					}
+					onMounted(()=>{
+						console.log(version)
+					})
+					onUnmounted(()=>{
+						alert('onUnmounted')
+					})
 					return {
 						rawHtml
 					}
@ -47,6 +60,9 @@
 			
 			app.mount('#app')
 			square.mount('#square')
+			
+			
+			
 		</script>
 	</body>
 </html>
--- a/share/main.css
+++ b/share/main.css
@ -10,4 +10,7 @@
 	/* margin-bottom: 10px; */
 	border: 1px solid #f1f1f1;
 	transform: rotate(1deg);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
--- a/webcomponent/index.html
+++ b/webcomponent/index.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>webComponent</title>
+	</head>
+	<body>
+		<user-card image="https://semantic-ui.com/images/avatar2/large/kristy.png" name="User Name"
+			email="yourmail@some-email.com"></user-card>
+		<template id="userCardTemplate">
+			<style>
+				:host {
+					display: flex;
+					align-items: center;
+					width: 450px;
+					height: 180px;
+					background-color: #d4d4d4;
+					border: 1px solid #d5d5d5;
+					box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+					border-radius: 3px;
+					overflow: hidden;
+					padding: 10px;
+			 	box-sizing: border-box;
+					font-family: 'Poppins', sans-serif;
+				}
+
+				.image {
+					flex: 0 0 auto;
+					width: 160px;
+					height: 160px;
+			 	vertical-align: middle;
+					border-radius: 5px;
+				}
+
+				.container {
+					box-sizing: border-box;
+					padding: 20px;
+					height: 160px;
+				}
+
+				.container>.name {
+					font-size: 20px;
+					font-weight: 600;
+					line-height: 1;
+					margin: 0;
+					margin-bottom: 5px;
+				}
+
+				.container>.email {
+			  font-size: 12px;
+					opacity: 0.75;
+					line-height: 1;
+					margin: 0;
+					margin-bottom: 15px;
+				}
+
+				.container>.button {
+					padding: 10px 25px;
+					font-size: 12px;
+					border-radius: 5px;
+					text-transform: uppercase;
+				}
+			</style>
+			<img class="image">
+			<div class="container">
+				<p class="name"></p>
+				<p class="email"></p>
+				<button class="button">Follow John</button>
+			</div>
+		</template>
+		<script>
+			class UserCard extends HTMLElement {
+				constructor() {
+					super();
+
+					var shadow = this.attachShadow({
+						mode: 'closed'
+					});
+
+					var templateElem = document.getElementById('userCardTemplate');
+					var content = templateElem.content.cloneNode(true);
+					content.querySelector('img').setAttribute('src', this.getAttribute('image'));
+					content.querySelector('.container>.name').innerText = this.getAttribute('name');
+					content.querySelector('.container>.email').innerText = this.getAttribute('email');
+
+					shadow.appendChild(content);
+				}
+			}
+
+			window.customElements.define('user-card', UserCard);
+		</script>
+	</body>
+</html>