msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

webcomponent

Browse Source
pull/127/head
laoyang 3 years ago
parent 24768237e2
commit 90c83d6e64
3 changed files with 114 additions and 2 deletions
Show Stats Download Patch File Download Diff File

20
share/index.html
Unescape View File

@ -7,20 +7,27 @@
<link rel="stylesheet" href="./main.css" /> <link rel="stylesheet" href="./main.css" />
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<button @click="cl">{{ message }}</button> <button @click="cl">{{ message }}</button>
<p>Count is: {{ count }}</p> <p>Count is: {{ count }}</p>
</div> </div>
<div id="square"><div v-html="rawHtml">loading...</div></div> <div id="square"><div v-html="rawHtml">loading...</div></div>
<script> <script>
const { createApp, ref, onMounted } = Vue const { createApp, ref, onMounted, onUnmounted,onBeforeMount,onUpdated,version } = Vue
const app = createApp({ const app = createApp({
setup(){ setup(){
const message = ref('Hello Vue!') const message = ref(`Hello Vue ${version} !`)
let count = ref(1) let count = ref(1)
const cl = function(){ const cl = function(){
count.value ++ count.value ++
} }
onMounted(()=>{
console.log(app.config)
})
onUpdated(()=>{
console.log('onUpdated')
})
return { return {
message, message,
count, count,
@ -39,6 +46,12 @@
rawHtml += `<div style="background:rgba(${i},${j},${Math.random()*255},.5)">${start}</div>` rawHtml += `<div style="background:rgba(${i},${j},${Math.random()*255},.5)">${start}</div>`
} }
} }
onMounted(()=>{
console.log(version)
})
onUnmounted(()=>{
alert('onUnmounted')
})
return { return {
rawHtml rawHtml
} }
@ -47,6 +60,9 @@
app.mount('#app') app.mount('#app')
square.mount('#square') square.mount('#square')
</script> </script>
</body> </body>
</html> </html>

3
share/main.css
Unescape View File

@ -10,4 +10,7 @@
/* margin-bottom: 10px; */ /* margin-bottom: 10px; */
border: 1px solid #f1f1f1; border: 1px solid #f1f1f1;
transform: rotate(1deg); transform: rotate(1deg);
display: flex;
justify-content: center;
align-items: center;
} }

93
webcomponent/index.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save